Margin Wants To Play Too

 
I built a mock social media profile converting a Photoshop Design to a functional HTML5 & CSS3 webpage:

 

 

 

Social Network Profile

 

 

 

You can see the live page here and check out the code on my GitHub.

While I was doing this project some of the elements and columns did not do as expected, and I realized that some elements kept moving out of place. And after a process of elimination I uncovered that this was only happening when I applied margin to certain elements.

It never really struck me why box-sizing: border-box is called border-box until I tried to use it to adjust the sizes of some elements. I had assumed that sense margin is a part of the box model that that would go right along and get adjusted to. Did that happen? Not so much…

It turned out that box-sizing: border-box limits the width and height of the content, padding and border of an element. But if for example, you’re trying to limit and split elements evenly within a container, but you have margin on them…

 

 

 

 

 

 

 

 

 

 

It seems that’s why it’s called border-box, not margin-box. The elements on your page are going to be doing their own thing.

To give an example I tried using margin in the code below with box-sizing: border-box active on all elements.

 

 

#top-area .profile-info .user-details h3 {
color: #000;
font-size: 24px;
font-weight: 300;
margin-top: 40px;

margin-bottom: 10px;

}

#top-area .profile-info .user-details a {
display: inline-block;
color: #000;
font-size: 12px;
text-transform: uppercase;
background: rgba(255, 255, 255, .7);
padding: 10px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
margin-left: 5px;
width: 45%;
margin-right: 5px;
text-align: center;
transition: background .4s ease-in-out;
}

 

 

 

So instead I changed it to:

 

#top-area .profile-info .user-details h3 {
color: #000;
font-size: 24px;
font-weight: 300;

padding: 10px;

margin-top: 40px;

/* margin-bottom: 10px; Not apart of box-sizing */

}

#top-area .profile-info .user-details a {
display: inline-block;
color: #000;
font-size: 12px;
text-transform: uppercase;
background: rgba(255, 255, 255, .7);
padding: 10px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
margin-left: 5px;
width: 45%;
margin-right: 5px;
text-align: center;
transition: background .4s ease-in-out;
}

Here I simply swapped the margin for padding. In a different situation with rows or columns I could also add a class to the last container in a row and remove its margin. Sense there would be no next item in a row, no margin is needed to be between anything, after the last row/column.
In addition, with columns I’ve found I could do something like “width: calc(50% – 10px);” on each column, similar to Bootstrap.

It should be interesting configuring more work-arounds for this. Especially for more complex issues. But it should be fun getting margin back in on the party. If you have any suggestions or work-arounds feel free to let me know. I’d love to hear about it.
 
Love & Peace,

Danielle