CSS Box Model

Understanding the Box Model

All HTML elements can be considered as boxes. The CSS box model is essentially a box that wraps around every HTML element.

It consists of: margins, borders, padding, and the actual content.

div {
  width: 300px;
  padding: 20px;      /* Space inside */
  border: 5px solid black;
  margin: 10px;       /* Space outside */
}

/* Box-sizing property */
* {
  box-sizing: border-box;
}
  • Content - The actual content (text, images)
  • Padding - Space around content, inside border
  • Border - Border around padding and content
  • Margin - Space outside border

Try Box Model

<div class="box1">Box with padding and margin</div>
<div class="box2">Another box</div>

Note: Use box-sizing: border-box to include padding and border in element's total width/height.