CSS Box Model

CSS Box Model

All HTML elements can be considered as boxes. In CSS, when discussing design and layout, the term 'box model' or 'frame model' is used.

CSS box model is essentially a box that wraps each HTML element. It includes: margin, border, padding, and the actual content. The following figure shows the box model:

CSS Box Model

Explanations of different parts:

  • Content - The content of the box, where text and images are displayed.
  • Padding - Clear the area around the content. Padding is transparent.
  • Border - The border around the inner padding and content.
  • Margin - Clear the area outside the border. Margins are transparent.

The box model allows us to add borders around elements and define the space between elements.

The innermost part of the element box is the actual content, directly surrounded by padding. Padding presents the background of the element. The edge of the padding is the border. Outside the border is the margin, which is transparent by default and does not block any elements behind it.

Tip:Background is applied to the area composed of content, padding, and border.

Padding, border, and margin are optional, with default values of zero. However, many elements are set by the user agent stylesheet for margin and padding. These browser styles can be overridden by setting the margin and padding of the element to zero. This can be done separately or using a universal selector to set all elements:

* {
  margin: 0;
  padding: 0;
}

In CSS, width and height refer to the width and height of the content area. Adding padding, border, and margin does not affect the size of the content area, but increases the total size of the element box.

Assuming each side of the box has 10 pixels of margin and 5 pixels of padding. If you want this element box to reach 100 pixels, you need to set the content width to 70 pixels. See the figure below:

CSS Box Model Example 
#box {
  width: 70px;
  margin: 10px;
  padding: 5px;
}

Tip:Padding, border, and margin can be applied to all sides of an element or to individual sides.

Tip:Margins can be negative, and in many cases, negative margins are used.

Example

Demonstrate the box model:

div {
  width: 300px;
  border: 15px solid green;
  padding: 50px;
  margin: 20px;
}

Try It Yourself

Element Width and Height

To correctly set the width and height of an element in all browsers, you need to understand how the box model works.

Important Tip:When setting the width and height attributes of an element with CSS, only the width and height of the content area need to be set. To calculate the full size of the element, you must also add the padding, border, and margin.

Example

<div> The total width of the element will be 350px:

div {
  width: 320px;
  padding: 10px;
  border: 5px solid gray;
  margin: 0; 
}

Try It Yourself

Calculation as follows:

320px (width)
+ 20px (left + right padding)
+ 10px (left + right border)
+ 0px (left + right margin)
= 350px

The total width of the element should be calculated as follows:

Total width of the element = width + left padding + right padding + left border + right border + left margin + right margin

The total height of the element should be calculated as follows:

Total height of the element = height + top padding + bottom padding + top border + bottom border + top margin + bottom margin