2

Can I use in my all murkup (all project ) box-sizing: border-box;?

for example: 

html { 
   box-sizing: border-box; 
}, 
:before, *:after {
  box-sizing: inherit; 
}

Because it is easier to count the real width, but are there any downsides to this approach?

Maihan Nijat
  • 9,054
  • 11
  • 62
  • 110
Limarenko Denis
  • 769
  • 1
  • 8
  • 13

3 Answers3

13

I generally apply it to everything. Use:

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

It makes every the g a lot easier and is widely supported.

https://css-tricks.com/international-box-sizing-awareness-day/

http://www.paulirish.com/2012/box-sizing-border-box-ftw/

Edit

It's also worth noting that the CSS working group consider this a mistake in the design of CSS:

Box-sizing should be border-box by default.

https://wiki.csswg.org/ideas/mistakes

Community
  • 1
  • 1
JamieC
  • 567
  • 3
  • 11
3

Using this is much beneficial

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

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

You can easily override it by applying specific CSS to any element.

Just for knowledge... Bootstrap also uses this technique.

IE6 and IE7 does not support this as per caniuse.com

kanudo
  • 2,119
  • 1
  • 17
  • 33
0

I use

html * {
    box-sizing: border-box;
}

and it's working very well for me.

PovilasC
  • 123
  • 9