CSS Box-Sizing: Border-Box

The new box-sizing element in CSS3 determines how the browsers process the padding attribute.

Currently, the default behavior is that browsers add the width of the border and the padding to the size of the division. So, if you had a division that was 100px wide and added a 1px border and 5px padding; the browser would expand the box to 112px. 100 + 2 * (5 + 1) = 112.

Adding the line "box-sizing: border-box;" to an element changes the behavior; so that padding reduces the space inside the division. This design is much more intuitive.

You might consider adding the following code to the top of the CSS to assure that all divisions behave intuitively:

Examples

This line is 200px in length

The "border-box" sizing is easier to use because padding no longer affects the size of the box.

The reason why the default behavior is so bizarre is political.

The Web Broswer Wars

The first web browser to capture the market was called Netscape. Netscape followed the intuitive path of subtracting padding from the size of an element.

By intuitive, I mean that the padding attribute works the same as padding works in the physical world. If you had a cardboard box that was 12x12x12 inches; adding an inch of foam padding in the box would decrease the inside of the box to 10x10x10.

To create Internet Explorer, Microsoft simply reversed-engineered the way that Netscape handled padding. This way pages that looked good on Netscape would looked good on Internet Explorer. To capture the web browser market, Microsoft included Internet Explorer with the Windows Operating system.

Once Microsoft had a majority share of the market, they began adding proprietary features to internet explorer and effectively destroyed the market for Netscape.

W3C and members of the web design community were livid with Microsoft.

To get back at Microsoft, W3C did the following: An engineer found an early document about Cascading Style Sheets in which the size of a division was determined by adding the width, border and padding.

The makers of Opera, Firefox, Chrome and Safari conspired to pretend this unintuitive approach to padding was both the ideal approach to web design and was the "standard."

And so we entered a period where web browsers handled the padding attribute differently. Netscape and Microsoft reduced the size inside the box by the padding while Firefox and Opera added the padding to the size of the box.

It was difficult to make a design that looked good in both Internet Explorer and Firefox.

The intelligentsia derided Microsoft for creating a web browser that was not "standards compliant." When Microsoft was following a de facto standard set by Netscape which was based on the way the real world works.

Politicos repeated the meme that Microsoft was not standard compliant when, in fact, it was the new browsers that intentionally created confusion in the design community.

Microsoft eventually lost this round of the browser wars. As soon as Microsoft capitulated and took Internet Explorer off the market, W3C introduced the box-sizing element to CSS allowing web designers to revert to the intuitive use of padding where padding reduces the space inside of a division.

I am not a fan of Microsoft. In this round of the browser wars, the thugs at W3C proved themselves to be as bad as monopolists at Microsoft.

I will start adding the line "box-sizing: border-box;" to my style sheets. But the fact that we now have two box sizing models on the market came about because the groups that set standards were acting as thugs.

The way the physical world works is that putting padding on the inside of a box reduces the volume of the interior of the box. Adding padding inside a box does not magically increase the size of the box. The unintuitive approach to box sizing should never have existed. The only reason that the two approaches exist is because a group of thugs at W3C wanted to attack a political enemy.

I will add the box-sizing directive to my pages, but each time I do, it will remind me that the politicos at W3C are thugs driven by political concerns over the needs of the design community.