This post is part of a CSS Layout course that you can take with us to learn how to create CSS Layouts using HTML and CSS float layout technique. This post will make sense to you the most if you watch the accompanying videos described in the course description at the end of this post. You might still be able to find useful information in this post even if you don’t take the course but that’s primarily not the goal of this post.
The CSS property box-sizing can have four different values:
initial and inherit apply to almost all (or I think all) CSS properties and are not important here, so we don’t talk about them.
When you set the value of the box-sizing property of an element to content-box, the width property defined for that element determines the width of the content area only, not including padding, border or margin.
For example, let say you had the following code,
border: 1px solid black;
This situation for div#1 would mean that the total width of div#id1 is the sum of,
- 150px content area width
- padding-left width of 20px
- padding-right width of 20px
- border-left width of 1px
- border-right width of 1px
- margin-left width of 20px
- margin-right width of 20px
That would in total come to,
150 + 20 + 20 + 1 + 1 + 20 + 20 = 232px
So you can easily calculate how much viewport width you need for div#id1. You can calculate it.
Note: The Firefox Firebug add-on does not take margin left or right into consideration when it’s reporting elements’ widths. But when you are doing layouts, you definitely need to take that into consideration as well since margin-left and margin-right of boxes take space in the viewport.
If, on the other hand, you set the box-sizing value of a box to border-box, the value of a width property given to that element would refer to the width of the content area, border-left and border-right and padding-left and padding-right of that element altogether. Let’s look at the following example,
For example, if you had the following,
border: 1px solid black;
This situation for div#id1 would mean that the total width of div#id1 is just 20% of the parent element. padding-left (20px), padding-right (20px), border-left (1px) and border-right (1px) are going to be subtracted automatically by the browser from the 20%, no matter what value the 20% in pixel happens to be based on the width of the parent element. For example, if in this case, the width of the parent element of div#id1 is 1080px, then the width of div#id1 is going to be 1080 * 20% = 216px. The content area of div#id1 is going to have a width of 216px – 20px (padding-left) – 20px (padding-right) – 1px (border-left) – 1px (border-right) = 174px.
Please note that I have written no margin in the code snippet above. Also, I have written the values for width and padding in different units, width in % and padding in px. It comes in handy if you’re able to use mixed units when you’re dealing with CSS layouts for example with float or also using other techniques.
Box-Sizing CSS Property Practical Application
box-sizing: border-box; is useful in situations where you want/have to enter the values for width, padding and border of your HTML elements in different mixed units. For example, you enter the width in % and padding and border in px. If you are developing a layout and have identified the width of some section of your layout in % and the width of padding related to that section in px, then there’s no way for you to calculate the total width of the section anymore if the box-sizing property of that layout section is set to content-box. In that case the total width would be “20% + padding-left-width + padding-right-width”. 20% is not a fixed value and changes based on the width of the parent element the layout section lives in.
In such cases, you set the box-sizing property of the layout section to border-box. Having the same example in mind, the total width of the the whole layout section would become 20% of the parent element the layout section lives in. The other element next to the layout section in the layout could have a width of 80% and you’re done.
As mentioned before, this post is part of the documentation section of a CSS Layout course. In this course, you can learn how to create flexible layouts using the “float” CSS property. You can take this course with us at the following address: