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?

Adamic

No reason that should not work. Can you demo? – Remindful

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/

Tarr

thanks Andi this format worked perfectly, I'll be using this as a more fool proof method in the future – Adamic

Answer 2

I created Initialize.css, a collection of best practices like normalize, HTML5 boilerplate and the "box-sizing" trick. It's configurable with SASS or LESS (there's a CSS version as well). You don't start with CSS overwrites, and that's awesome! :-)

http://jeroenoomsnl.github.io/initialize-css/

Melodious