How do you add 'box-sizing: border-box' to Normalize.css file?

Question

I constantly use box-sizing: border-box; on all elements when creating CSS files, ie

* {
 -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
         box-sizing: border-box;
}

However I cannot seem to get this to work with the file 'Normalize.css' (https://github.com/necolas/normalize.css)

I have tried adding the above code to the top of my own CSS file, within normalize itself, but have been unsuccessful

I would very much like to utilise normalize.css as it is not as drastic as some other CSS reset files, but how do I make it accept box-sizing: border-box; so that it effects all elements and is cross browser friendly?

Answer 1

The best way I have seen so far of getting box-sizing working is:

html {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}

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

If your CSS reset (normalize.css) is inserted at the very top of your stylesheet, with this rule just after normalize, all should work as expected.

The rule above allows easier control over setting box-sizing: content-box for things like third party widgets.

For more information on this technique, I'd recommmend: https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ or http://www.paulirish.com/2012/box-sizing-border-box-ftw/