Box sizing doesn't matter

Programming HTML-CSS
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.

17%20PM
17%20PM572×792 55 KB
04%20PM
04%20PM636×770 55.3 KB

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.