Box sizing doesn't matter


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?


1 Like

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

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


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

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

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.

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

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.

@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.