Understanding the CSS Box Model

CSS Box Model

The CSS box model describes how a browser treats an HTML element as a rectangular box made up of content, padding, a border, and margins.

Understanding the box model is essential when controlling the size, spacing, and position of elements on a web page. The dimensions you assign to an element can affect more than its visible content because padding and borders can also contribute to the space the element occupies.

Parts of the Box Model

Every element displayed as a CSS box has several areas arranged around one another. Starting at the center and moving outward, they are the content, padding, border, and margin areas.

These areas are nested around each other in the following order:

Margin
  Border
    Padding
      Content

Content Area

The content area is the innermost part of the box. It contains the element's text, images, child elements, or other content.

Properties such as width and height can control the dimensions of this area when the element uses the default content-box sizing model.

.box {
  width: 300px;
  height: 150px;
}

With the default box sizing, these dimensions describe the content area before padding and borders are added.

Padding Area

Padding creates space between an element's content and its border. The element's background extends through the padding area.

.box {
  padding: 20px;
}

Padding can be applied to all four sides together or controlled individually with top, right, bottom, and left values.

Border Area

The border surrounds the content and padding areas. A border can have its own width, style, and color.

.box {
  border: 5px solid steelblue;
}

Under the default content-box model, the border is added outside the dimensions assigned to the content area.

Margin Area

The margin is the outermost area of the box model. It creates space between the element's border and surrounding elements.

.box {
  margin: 30px;
}

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

Calculating Box Size

With the default box-sizing: content-box, the declared width and height apply to the content area. Horizontal padding and borders are added to the declared width.

For example, consider an element with the following CSS:

.box {
  width: 300px;
  padding: 20px;
  border: 5px solid steelblue;
}

The rendered box is wider than 300px. Its border-box width is calculated as:

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

The margins are outside the border box. If this example also had margin: 30px, the left and right margins would add another 60px of separation around the box, although margins are not part of the element's border-box dimensions.

The box-sizing Property

The box-sizing property changes how the browser calculates an element's declared width and height.

The default value is content-box. With border-box, the declared width and height include the content, padding, and border.

.box {
  box-sizing: border-box;
  width: 300px;
  padding: 20px;
  border: 5px solid steelblue;
}

In this example, the complete border box remains 300px wide. The space available for the content is reduced to make room for the padding and border.

The box-sizing property is covered in detail later in this Box Model tutorial section.

Box Model Example

The following example gives the box a content width, padding, border, and margin. Each part contributes differently to the element's size or surrounding space.

.box {
  width: 300px;
  padding: 20px;
  border: 5px solid steelblue;
  margin: 30px;
}

Open the example in the editor and change the width, padding, border, and margin values. Run the example after each change to see which part of the box is affected.