The CSS Box Model

There are actually two box models in CSS, the standard and the alternate. By default, browsers use the standard model.

Note that the box model applies wholly to block boxes. Inline boxes only use some of the model.

• Content box: The area where your content is displayed; size it using properties like inline-size and block-size or width and height.
• Padding box: The padding sits around the content as white space; size it using padding and related properties.
• Border box: The border box wraps the content and any padding; size it using border and related properties.
• Margin box: The margin is the outermost layer, wrapping the content, padding, and border as whitespace between this box and other elements; size it using margin and related properties.

![[CSS Box Model.png]]

In the standard box model, padding and border is added to the defined width/height dimensions to get the total size taken up by the box. e.g. 100px width + 30px padding = 160px wide box.

In the alternate box model (box-sizing: border-box), the total size is the defined width/height. e.g. 100px width + 30px padding = 100px wide box.

[[css]]