WP-Mix

A fresh mix of code snippets and tutorials

CSS box-sizing all elements

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:

*, *:before, *:after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	}

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:

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

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

★ Pro Tip:

Digging Into WordPressGA Pro