can someone help me understand why we use the border-box and what happens when you add padding to left and right.
i dont get when he says it gets bigger than the 70% width
Steven Parker163,760 Points
Border-box causes the size to be measured from the outside of the border.
This includes the content, padding, and border in the size determination (but not the margin).
On the other hand, content-box only counts the interior in determining the size. This is probably best demonstrated graphically, where you can play with various properties and see how they affect the sizings differently.
Try experimenting a bit with this great box sizing demo.
I found that a few minutes of experimentation made things much clearer than reading large quantities of documentation.
Erik Nuber20,626 Points
border-box - The width and height properties (and min/max properties) includes content, padding and border, but not the margin
content-box - is the default. The width and height properties (and min/max properties) includes only the content. Border, padding, or margin are not included
an element is comprised of content, padding, border and then margin
when you increase padding, you are increasing the area between the content and border so it will basically push the border out farther.
Basically we use border box value : It forces the padding and border into the width and height of the element, Instead of it expanding.