CSS Box Model

The CSS Box Model

All HTML elements can be thought of as boxes. In CSS, the term "box model" is used for design and layout.

The CSS box model is essentially a box that encapsulates surrounding HTML elements. It includes: margins, borders, padding, and actual content.

The box model allows us to place elements in the space between other elements and surrounding element borders.

The following picture illustrates the Box Model:

Description of different sections:

  • Margin (Margin) -Clear the area outside the border. The margin is transparent.
  • Border -A border around the padding and content.
  • Padding (Padding) -Clear the area around the content. The padding is transparent.
  • Content (content) -The content of the box, displaying text and images.

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


div { background-color: lightgrey; width: 300px; padding: 25px; border: 25px solid navy; margin: 25px; }
Try it yourself »

Width and Height of an Element

Remark Important: When you specify the width and height attributes of a CSS element, you just set the width of the content area And height. To know that for full-size elements, you must also add padding, borders, and margins. .

The total width of the elements in the following example is 300px:


div { width: 300px; border: 25px solid green; padding: 25px; margin: 25px; }
Try it yourself »

Let's figure it out ourselves:
300px (width)
+ 50px (left + right padding)
+ 50px (left + right border)
+ 50px (left + right margin)
= 450px

Imagine that you only have 250 pixels of space. Let's set an element with a total width of 250 pixels:

The formula for calculating the total width of the final element is like this:

Width of the total element = width + left padding + right padding + left border + right border + left margin + right margin

The final calculation formula for the total height of the element is this:

Height of total element = height + top padding + bottom padding + top border + bottom border + top margin + bottom margin

Browser compatibility issues

Once the proper DTD is set for the page, most browsers will render the content as shown above. However, the rendering of IE 5 and 6 is incorrect. According to W3C specifications, the space occupied by element content is set by the width property, and padding and border values ‚Äč‚Äčaround the content are calculated separately. Unfortunately, IE5.X and 6 use their own non-standard model in weird mode. The width property of these browsers is not the width of the content, but the sum of the width of the content, padding, and border.

Although there are ways to solve this problem. But the best solution at the moment is to avoid this problem. That is, do not add padding to the element with a specified width. Instead, try adding padding or padding to the element's parent and child elements.

IE8 and earlier versions do not support setting padding width and border width properties.

Solve the incompatibility issue of IE8 and earlier versions can be declared in the HTML page <!DOCTYPE html> Just fine.