CSS Box Model

All HTML elements can be regarded as boxes. In CSS, the term “box model” is used in design and layout.

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

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

The picture below illustrates the Box Model:

CSS Box Model

Explanation of the different parts:

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

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

Element width and height

RemarkImportant: When you specify the width and height properties of a CSS element, you just set the width and height of the content area. You know, for full-size elements, you must also add padding, borders, and outer margins.

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

Example

div { width: 300 px 
     ;
     border: 25 px solid green   ;
     padding: 25 px ;
     margin: 25 px ;
 }

Let us do the calculations 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:

Example

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

The formula for calculating the total width of the final element is as follows:

The 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 as follows:

The height of the total element = height + top padding + bottom padding + top border + bottom border + top margin + bottom margin

Browser compatibility issues

Once the appropriate 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 the W3C specification, the space occupied by the element content is set by the width property, and the 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 is to avoid this problem. That is, don’t add padding with a specified width to the element, but try to add padding or outer margins to the element’s parent and child elements.

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

To solve the incompatibility problem of IE8 and earlier versions, you can declare <!DOCTYPE html> in the HTML page.