CSS CSS Layout Basics Getting Started with CSS Layout Using a Mobile First Approach

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

3 Answers

Steven Parker
Steven Parker
155,187 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.

:point_right: 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 Nuber
Erik Nuber
20,624 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.