In this section, we will learn what the box-sizing property is and how to use it in CSS.
Click here to run the example of box-sizing property (height).
Click here to run the example of box-sizing property (width).
CSS box-sizing Property Definition and Usage
Let’s say we have a box with the size of 100px. We add 2 inline boxes into this container:
The first box has 70% width of its parent (which is equal to 70px in this scenario) and the next one has 30% width of its parent (which is equal to 30px for this example).
In total, these two boxes occupy the 100% width of their parent. And because these two boxes are inline, we expect them to sit next to each other in a row within the container.
Now let’s see if this is true in reality:
See the Pen Now let’s see if this is true in reality by Omid Dehghan (@enjoytutorials1) on CodePen.
In the example above, we have created 2 <main> elements as the children of the <body> element and gave the Left <main> element the width of 70% and the Right <main> element the width of 30%.
Note: the `float` property explained in float section, but for this example, we used them to make the two <main> elements sit next to each other if there’s enough space for both of them.
Now if you run the example, you’ll see that these two <main> elements don’t sit next to each other even though their width together is equal to 100% width of the body!
But why?
The problem lies within the area in which the value of `width` property applies to! You see, in the example above, when we say a width property is equal to 70% it means only the content of that element has 70% width of the body! But we know that an element also has “padding” and “border” as well as margin! So we should remember that the values for these properties also add up to the total width of the element.
Total-width = margin-left + border-left + padding-left + width + padding-right + border-right + margin-right
Total-height = margin-top + border-top + padding-top + height + padding-bottom + border-bottom + margin-bottom
So in the example above, the total width of the Left <main> element is:
Total- width = 0 margin-left + 1px border-left + 16px padding-left + 70% width (content) + 16px padding-right + 1px border-right + 0 margin-right.
The width size for the Left <main> element is actually 70% + 34 pixels added up for the left and right padding and left and right borders.
Also, the total width of the Right <main> element is:
Total- width = 0 margin-left + 1px border-left + 16px padding-left + 30% width (content) + 16px padding-right + 1px border-right + 0 margin-right.
The width size for the Right <main> element is actually 30% + 34 pixels added up for the left and right padding and left and right borders.
So in total, these two elements have 68 pixels more than what the main body can handle! And that’s why the Right <main> element went to the next line (because there wasn’t enough space).
So the take away from this example is that: When we set the width or height of an element, we’re specifying the width or height of its content; any padding, border, and margins are then added to that width.
But we can change this behavior by using a property called `box-sizing`.
By default, box-sizing is set to the value of “content-box” which means that any height or width we specify only sets the size of the content of an element.
But we can set another value for this property which is “border-box”. That way, the height and width properties set the combined size of the content, padding, and border.
CSS box-sizing Property Syntax
box-sizing: content-box|border-box|initial|inherit;
CSS box-sizing Property Value
There are two values for this property:
- “content-box”: this is the default value, and that means the width and height of an element is limited to just the content itself (without the size of padding and borders).
- “border-box”: using this value means the size of an element includes the size of the padding and borders of that elements as well.
Note: the two global values “initial” and “inherit” could also be used for this property.
Example: box-sizing property in CSS
See the Pen box-sizing property in CSS by Omid Dehghan (@enjoytutorials1) on CodePen.
How Does CSS box-sizing Property Work?
In the example above, we’ve set the `border-box` property to “box-sizing” property, which caused the two <main> elements to sit next to each other.
In this example the left <main> element set the width to 70% and that means from the beginning edge of the left side border to the ending edge of the right side border, the width shouldn’t be more than 70% of the parent width size. So the browser will calculate the size of the left and right padding + left and right borders and it will squish down the size of the content itself so that these paddings and borders size can be added and not pass the 70% defined width size.
The right <main> element also sets the width to 30% which means from the beginning edge of the left side border to the end edge of the right side border, the width shouldn’t be more than 30% of the parent width size. So then browsers will calculate the size of the left and right paddings + left and right borders and it will squish down the size of the content itself so that these paddings and borders size can be added and not pass the 30% defined width size.
And that’s how these two elements now sitting next to each other.
Note: the margin value in this example is set to 0 but if we changed that value to 1px for example, again, the final width value (Left and Right <main> elements together) will pass the total 100% width and so the Right <main> element had to sit in the next line.
Basically, margins are not covered when we set the value for `box-sizing` property to “border-box”.
