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 (content-box), padding and border is added to the defined width/height dimensions to get the total size taken up by the box.

.box {
  width: 200px;
  height: 100px;
  padding: 20px;
  border: 10px solid black;
}

• Width = 200 (content) + 40 (padding) + 20 (border) = 260px
• Height = 100 (content) + 40 (padding) + 20 (border) = 160px

In the alternate box model (border-box) the total size is the defined width/height.

• Width = 200px total, broken down as:
  • Border: 10px left + 10px right
  • Padding: 20px left + 20px right
  • Content width: 200 - 40 (padding) - 20 (border) = 140px
• Height = 100px total, same logic applies In my experience, this is the more used model due to its predictability.

[[css]]