Box sizing doesn't matter

Box sizing doesn't matter
0

#1

hello

i can’t see a different between:

box-sizing: content-box;

box-sizing: border-box;

in both cases when i add padding the element total width and height get bigger. do i miss something here?

thanks


#2

when using border-box, the overall width and height include the size of the border and padding itself. Heres a link that shows this in action https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing


#3

thanks @bradyvossler but still why they both look the same when previewing?


#5

Hi,

I should have “completely” read your original post. Hope this explains the difference.


#6

@pdxdave can you see in both cases the div still getting bigger if you add more padding?


#7

Not sure what you mean. I’ve included a screenshot. Notice how I increased the padding to 40px. The box1 (which is hovered showing its size ) is still 200px by 200px. Box2 is 290px by 290px.


#8

and if you add 300px padding, they both change size. doesn’t the one with the border-box value should still stay the same?


#9

Maybe you can help me out. In what scenario would you make a box that’s 200px by 200px then give it 300px of padding? Why not just make the initial size of the box bigger? I’m just thinking of this in terms of a practical solution rather than major extremes.


#10

@pdxdave you are right it doesn’t change. what i missed is that if you use more padding than the element’s width then the element will grow larger.