Interactive Tool for CSS 'box-sizing' Property
When a div has CSS width or height properties specified, they apply to the width and height of the content within the div.
Any CSS border or padding specified for the div makes the actual dimensions of the div larger than the specified width and height. Changing border or padding size changes the actual dimensions of the div.
Here's an example of two divs with width:100px; and height:50px specified, but different border widths.
As you can see, the content width remains at 100 pixels and the height at 50 pixels regardless the size of the border. The content width and height would remain 100 pixels with padding specified, like it does with border specified.
Which may be what you want.
But if you prefer the entire box to be 100 pixels wide and 50 pixels high, regardless the resulting dimensions of the content, then the CSS box-sizing:border-box; declaration will do the trick.
Here is example code, without and with box-sizing:border-box; specified.
<div style="width:100px; border:9px solid black;">9px border</div>
<div style="width:100px; box-sizing:border-box; border:9px solid black;">9px border</div>
When you don't specify a box-sizing property, the browser assumes box-sizing:content-box;. The value content-box is default for the box-sizing property.
The effect is similar for any HTML container, not just div. Form fields, for example. And tables.
Below is an interactive tool you can use to see the effect of various border and padding sizes, with and without the box-sizing:border-box; declaration.
The interactive tool's example div has width:200px; and height:300px; specified. As you change the CSS values below the example div, the div changes. The visual dimension is noted below the div and above the interaction fields.
Interactive box-sizing Tool
box-sizing value:
width:200px; height:300px;
Border size in pixels:
Padding in pixels:
Use the dropdown to switch between box-sizing:border-box; and box-sizing:content-box;, with various border thicknesses and padding amount (either can have 0 specified).
Just as the box-sizing property affects width and height properties, it also affects the min-width, max-width, min-height, and max-height properties.
When the box-sizing property is absent or is declared as box-sizing:content-box;, any width and height specifications (including maximum and minimum) apply to the width and height of the content within the div. Only with the CSS box-sizing:border-box; declaration do the widths and heights apply to the outside edge of the border.
How does a person choose?
If the div must fit within a certain space, a common choice is to declare box-sizing:border-box; so the specified width and height values apply to the outside edge of the border.
On the other hand, if the width and height of the content are the important measurements, regardless the dimension the div may end up being, then the box-sizing property can be absent or box-sizing:content-box; can be declared.
(This article first appeared in Possibilities newsletter.)
Will Bontrager
