Content-box vs. border-box

HTML & CSS
1

When it comes to box-sizing…

Is there any compelling reason to use content-box?

It seems like border-box is much more intuitive, even though I never knew it existed until now.?! :open_mouth:

2
  1. content-box gives you the default CSS box-sizing behavior.
    If you set an element’s width to 100 pixels, then the element’s
    content box will be 100 pixels wide, and the width of any
    border or padding will be added to the final rendered width,
    making the element wider than 100px.
  2. border-box tells the browser to account for any border and
    padding in the values you specify for an element’s width and
    height. If you set an element’s width to 100 pixels, that 100 pixels
    will include any border or padding you added, and the content
    box will shrink to absorb that extra width. This typically makes it
    much easier to size elements.

Further reading:-

MDN - CSS box-sizing

coothead

3

Thanks @coothead, but that doesn’t answer my question… :wink:

(I already know what each one does.)

4

OK. :rofl:

The current vogue appears to be the insertion
of this blanket CSS…

html {
    box-sizing: border-box;
 }

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

My contrary nature, does not allow me to do this. :unhappy:

So you could say that I have a “compelling reason” to
use the browser default setting which is content-box. :biggrin:

I just use border-box as and when I need to. :winky:

coothead

5

So you do it to be a rebel, but it seems for no other logical reason.

It has always seemed dumb to me that if I specify a box that is 100px by 100px, that after I start styling it it is no longer that size.

But to each his/her own.

I was just curious what others think.

More so, I am wondering why you would not want to use border-box?

6

I did not say that I “would not want to use border-box”. :unhappy:

What I did indicate was that I prefer to use it selectively. :winky:

There may well be different constraints for those who are
forced to work within a group who, I suppose, must all sing
from the same hymn sheet. :biggrin:

But I am a free agent and I really don’t give a sh12. :rofl:

coothead

7

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.