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
! :)