CSS tips and tricks #15 – CSS box model without secrets

Many web designers and developers struggle with various aspects of their craft in their humble beginning. CSS box model can be of those things. I too had a problem with complete understanding this part of CSS. Margin, padding, borders, width and height. All those properties seemed confusing back then. When I finally became solid in the basics, one of my mentors pointed to how borders and padding can easily change the width and height of element. Again, I was back on the start. Since this issue is common, let’s explore the CSS box model today …

The CSS box model compose of couple properties mentioned above. These are padding, border, margin, width and height. I chose this particular order to help you understand how box model looks like and how does it work. In the center of this model is content of the element. As you may already noted, all of the properties on our list have impact on the total width and height of the element.

Width & height

Width and height simply stands for the width and height of the element. They can be set in pixels, ems, percentages, centimeters, inches, points or whatever you want (don’t take me seriously on this and focus on first three). There is nothing difficult to understand. No rocket science at all. However, this is not the end of the story. What you also have to understand about these properties is that they don’t include padding, borders and margins. Later in, I will explain why this is important to remember, but now let’s have a quick look at the rest of properties on the list.

Padding

Padding stands for a space around the content of any element. For example, if you create a paragraph of text surrounded by border and you add a padding, you will add a white space equal to value you set to padding between the text and the border. When you want to use padding, you can either define a value for every of four sides …

CSS:

div {
  padding-top: … ;
  padding-right: … ;
  padding-bottom: … ;
  padding-left: … ;
}

Or you can use a shorthand and do all of the work on single line. In case of shorthand, there are other options depending on the values for individual sides. The same philosophy of shorthand applies to margin as well. Below are examples for all of them.

CSS:

/*Different top, same left and right and different bottom*/
div { padding: 7px 15px 62px; /*top left-right bottom*/ }

/*Same top and bottom and same left and right*/
div { padding: 62px 15px; /*top-bottom left-right*/ }

/*All values are the same*/
div { padding: 13px; }

Border

Next property from box model is border. Border comes into play right after padding. This means that in any case you add padding, it will move the border too – the width of element will be changed. For example, a div with width and height of 50 pixels will be bigger after adding either padding or border. So, if you add padding of 17 pixels and border of 2 pixels. Again as in previous example, you can define border for every side or use shorthand.

Unlike the padding shorthand now the syntax is a bit longer. You have to define width of the border, its style and lastly the color. When it comes to style, you can choose from several options. These options are solid (line), dotted, dashed, double, groove (3d grooved), ridge (3d ridged), inset and outset. One more thing about the color … If you want it to be the same as color of the text (element), you can omit it.

CSS:

/*With specified color*/
div { border: 3px solid #333; /*width style color*/ }

/*Without specified color – color will be inherited from color of the text (element)*/
div { border: 6px dashed; /*width style*/ }

Margin

As with padding, margin also adds a space, but around the element instead. So, if we use the paragraph example from padding case, Now, the text will still be right next to the border of element and the white space will be added outside it. If you create another paragraph, margin will create a space between them.

The Math

Now, when we understand all the available properties included in CSS box model, we can take a look at how do they actually work. I’m sorry for this, but it will require some math to pass this part. I included a short formula for counting the total width and height below, but for the sake of simplicity, let’s imagine it like this. Width is everything from left to right – margin-left, border-left, padding-left, width, padding-right, border-right and margin-right. On the other hand, height is everything from the top to bottom – margin-top, border-top, padding-top, width, padding-bottom, border-bottom and margin-bottom. I hope it makes sense to you and here is the “more formal” version of this formula:

Total width = width + left padding + right padding + left border + right border + left margin + right margin
Total height = height + top padding + bottom padding + top border + bottom border + top margin + bottom margin

Let’s use a simple example here to try the formula in action. We will create a div element with width and height set to 50px, padding of 13px, border with style set to solid, width to 2px and black color and margin set to 0px.

CSS:

div {
  margin: 0px;
  padding: 13px;
  width: 50px;
  height: 50px;
  border: 2px solid #000;
}

If you use following code to create that div and use a browser tools (inspector or firebug) to inspect the div, you will find out that total size of the div is 80px x 80px and it is right. Just use the formula and do the math – 50px + 13px + 13px + 2px + 2px + 0 + 0 = 80.

Box-sizing

Are you afraid of doing math exercise every time you use any of CSS box model properties? Don’t worry about that. There is a one-line magic trick you can do to “neutralize” the effect the properties have on total width and height of element. All you have to do is to use box-sizing property with value of content-box or border-box. The first, content-box, is default so it will change nothing – div will remain 80px x 80px. However, the second value – border-box – will decrease the total width and height to its default values we used in CSS – 50px x 50px.

After applying border-box value the size (width and height) of the div will remain the same and padding and border properties will be used “outside-in” – it will decrease the content of the element.

Summary

I hope that now you have a clear idea about how CSS box model works. However, the best way to get all the theory under your skin is only through practice.

If you liked this article, please subscribe so you don't miss any future post.

Subscribe

If you'd like to support me and this blog, you can become a patron, or you can buy me a coffee 🙂

Become a Patron Donate via Paypal