CSS Box Model

With the CSS box model each element is considered a box.

This box consists of a border, a margin, a padding and the content itself.

The CSS box model is used by the browser to properly place elements on a page.

This image demonstrates the parts of the box model.

box model

Margin - Space outside the border. Margin is not stylable.

Border - A 4-sided line around the content and the padding. Stylable.

Padding - Space between the content and the border. Not stylable.

Content - Text, images, and other content. Stylable.

For details on box-sizing, see our CSS box-sizing Property Reference.


Example

#

An element with content, and equally-sized margin, border, and padding.
Padding and margin are transparent

Content
<style>
  .box-model {
    max-width: 500px;
    border: 25px solid lightblue;
    padding: 25px;
    margin: 25px;
  }
</style>

<div class="box-model">Content</div>

Width and Height of elements

Considering the box model, how are width and height calculated?

In other words, does it include content, padding, border, margin?

The CSS box model states that width = content + padding + border. It disregards margin. The same formula applies to the height.

In this example, the visible part, including the border, is 400px wide.
The margin is ignored (see calculation below).

CSS box model
<style>
  .box {
    width: 350px;
    padding: 20px;
    border: 5px solid #302ea3;
    background-color: aliceblue;
    margin: 25px;
  }
</style>

<div class="box">CSS box model</div>

The total width is calculated as follows:

350px (content width) +
 20px (left padding) +
 20px (right padding) +
  5px (left border) +
  5px (right border) = 400px

Height calculations work the same way.


You may also like

Guides