CSS box-sizing
The CSS box-sizing
property can be set to:
- ▪
content-box
or - ▪
border-box
content-box [default]
When this value is set and you set the width
of an element, you are setting the width of the content box.
The core of the onion.
The total width of the onion will be this width plus the width of the 3 other layers.
localhost:3000
* { margin: 0; padding: 0; } div { width: 120px; padding: 20px; border: 4px solid; margin: 30px; }
border-box
When this value is set and you set the width of an element, you are setting the width of the border box. This is made up of the onion core and 2 of the layers. The total width of the onion will be this width plus the width of outer-most layer.
localhost:3000
* { margin: 0; padding: 0; } div { box-sizing: border-box; width: 120px; padding: 20px; border: 4px solid; margin: 30px; }
border-box
is more commonly used than content-box
.
Use the snippet below to set it on all elements.
/index.css
*, ::before, ::after { box-sizing: border-box; }
Working with Margins
When working with margins, their size can be influenced by things other than the margin
value. See consistent / varying gaps.
Where to Next?
CSS
YOU ARE HERE
Box Sizing


