Understanding the Box Model

CSS Box Model

The CSS box model describes how browsers treat HTML elements as rectangular boxes. Each box can contain a content area surrounded by padding, a border, and a margin, and understanding these areas is essential when controlling the size and spacing of elements.

What is the CSS Box Model?

When a browser displays an HTML element, CSS treats the element as a rectangular box. The box model describes the different areas that make up this box and how they contribute to its size and spacing.

From the inside outward, the four main areas are content, padding, border, and margin.

The Four Areas of the Box Model

Each area of the box model has a different purpose. The content contains the element's content, padding creates space around that content, the border surrounds the padding and content, and the margin creates space outside the border.

Content
  ↓
Padding
  ↓
Border
  ↓
Margin

A simple element can use all four areas at the same time.

div {
  width: 300px;
  padding: 20px;
  border: 5px solid #333333;
  margin: 20px;
}

Content Area

The content area is the innermost part of the box. It contains content such as text, images, or other HTML elements.

div {
  width: 300px;
  height: 100px;
}

With the default box-sizing behavior, the width and height properties normally specify the dimensions of the content area. Padding and borders are added outside those dimensions.

Padding Area

Padding is the space between the content and the border. It creates room inside the element around its content.

div {
  padding: 20px;
}

Padding is part of the element's background area. If the element has a background color or background image, that background normally extends through the padding.

Border Area

The border surrounds the content and padding. Its width contributes to the overall size of the element's box.

div {
  border: 3px solid #0088cc;
}

Borders can have different widths, styles, and colors on each side of an element.

Margin Area

Margin is the space outside an element's border. It is used to create separation between the element and surrounding content.

div {
  margin: 20px;
}

Unlike padding, margin is outside the element's border and does not display the element's background.

How the Box Model Affects Size

With the default box-sizing: content-box; behavior, an element's declared width applies to its content area. Horizontal padding and borders are then added to determine the width of the element's border box.

div {
  width: 300px;
  padding: 20px;
  border: 5px solid #333333;
}

In this example, the content width is 300 pixels. The left and right padding add 40 pixels, and the left and right borders add another 10 pixels.

300px content
+ 40px padding
+ 10px border
= 350px border-box width

Margins can require additional space around the element, but they are outside the border box and are not part of the element's width.

Try the Box Model

Edit the width, padding, border, and margin values in the example to see how each part changes the element's box and the space around it.

Why the Box Model is Important

The box model affects the size, spacing, and position of nearly every element on a web page. An element may take up more room than expected when padding and borders are added to its declared width or height.

Understanding the box model makes it easier to control layouts and diagnose spacing problems. The following tutorials examine each part of the box model and the CSS properties that control sizing and overflow.

Summary

The CSS box model represents elements as boxes made up of content, padding, borders, and margins. Content occupies the innermost area, padding creates space around the content, borders surround the padding and content, and margins create space outside the border. Together, these areas determine how much space an element occupies in a layout.

The next tutorial takes a closer look at the Content Area, the innermost part of the CSS box model.