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
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
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
thanks @bradyvossler but still why they both look the same when previewing?
Hi,
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.