WordPress Code Snippets

A fresh mix of code snippets and tutorials

CSS box-sizing all elements

223

The CSS box-sizing property makes it much easier to work with elements that have padding and borders. Here is a ruleset that will apply the box-size property to all elements.

To apply box-sizing: border-box; to all HTML elements on the page, include the following snippet of CSS:

This works for any browser that understands box-sizing, -moz-box-sizing, or -webkit-box-sizing. With this code in place, box-sizing will be applied to all elements, including the :before and :after pseudo-elements.

Here is a chart showing the breadth of browser support for this technique:

http://caniuse.com/#feat=css3-boxsizing

Even Internet Explorer 8 and Opera Mini can has box-sizing! :)


Show Support

Like our new Facebook Page to show support!