CSS Box Model

What is the CSS Box Model?

In CSS, every HTML element is treated as a box. The CSS box model describes how the size and spacing of this box are calculated.

The Four Parts of the Box Model

• Content – The text or image inside the element
• Padding – Space between content and border
• Border – Surrounds the padding and content
• Margin – Space outside the border

Box Model Example

div {
  width: 200px;
  padding: 20px;
  border: 2px solid black;
  margin: 15px;
}
  

How the Size is Calculated

Total width = content + padding + border + margin

Box-Sizing Property

By default, padding and border are added to the width. You can change this behavior using box-sizing.

* {
  box-sizing: border-box;
}
  

Using border-box makes layouts easier and more predictable.

Next tutorial: CSS Colors