In CSS, we can specify a number of sizes for different parts of the box model.
The box-sizing property then tells the browser how to add those up for the actual rendered width of the box.
This also applies to the height, but to simplify the explanation we will focus on the width.
The default value for the box-sizing property is content-box.
This means the value you set for the width property is only for the content.
You have to add in the padding and border to get the actual rendered width of the box.
A useful alternative value for the box-sizing property is border-box.
This means the value you set for the width property includes content, padding, and borders.
The two boxes below use these two different box-sizing values. Their actual rendered width is noted, but you could also use the element inspector to examine the rendered box. When you hover over an HTML element in the inspector, its rendered width is displayed on the page near the edge of the element.
box-sizing: content-box;
width: 300px;
padding: 10px;
border: 2px solid #000000;
Actual rendered width: 324px
box-sizing: borders-box;
width: 300px;
padding: 10px;
border: 2px solid #000000;
Actual rendered width: 300px
Using the information in the boxes below, calculate their actual rendered width.
Remember, content-box means that your width property only applies to the content,
so you have to add up the padding and borders to get the actual rendered width.
However, border-box means that your width property already includes those values.
Include px as your unit label.
box-sizing: content-box;
width: 275px;
padding: 12px;
border: 4px solid #000000;
Actual rendered width:
box-sizing: border-box;
width: 275px;
padding: 12px;
border: 4px solid #000000;
Actual rendered width:
Why not just deal with the default behavior? So what if you have to do a little addition?
Web sites have become increasingly complex over the years. Layouts frequently use many columns. These columns are easier to style with the border-box calculation.
The boxes below are shown in three columns because of the simple CSS shown. It uses the simple border-box calculation. If we had let the browser use the default content-box calculation, the padding and borders would make the boxes too big to fit in their container.
Click the toggle button below to see it live.
width: 600px;
border: 2px solid #FF0000;
width: 200px;
padding: 4px;
border: 2px solid #000000;
border-box,
the three columns are exactly 200px+200px+200px.
When content-box,
the three columns are 212px+212px+212px,
which is too big for the 300px container.
Current box-sizing calculation:
With so many different devices used to view web pages,
we often want our layouts to be as flexible as possible.
Combining border-box calculation with percentage widths,
we can easily achieve a flexible column layout that fills the width of the browser.
Just as before, toggling to content-box makes the
boxes too big to fit next to each other in their contianer.
width: 100%;
border: 2px solid #FF0000;
width: 33.33%;
padding: 4px;
border: 2px solid #000000;
Current box-sizing calculation: