DEV Community

Discussion on: How to Treat Your CSS Elements: The Box-sizing Property

View post
Collapse
 
chiangs profile image
Stephen Chiang •

Great article, border-box is a great way to make things a little simpler.

For those wondering, there are a few ways to set it as the default(ish) behavior:

Method 1 

* {
  box-sizing: border-box;
}
Enter fullscreen mode Exit fullscreen mode

Method 2 

*, *:before, *:after {
    box-sizing: border-box;
}
Enter fullscreen mode Exit fullscreen mode

Method 3 

html {
    box-sizing: border-box;
}

*, *:before, *:after {
    box-sizing: inherit;
}
Enter fullscreen mode Exit fullscreen mode

I prefer method 2, as it keeps it more simple and straight-forward for me, however, method 3 gives more flexibility as then the developer can choose when to use content-box at will. The flip-side to that is that means border-box can't be inherited normally.

Collapse
 
abdiko25 profile image
Abdi Ali •

It's amazing how wonderful you explained the difference and impacts on implications