The core of the box model is the calculation rules of element size, and understanding it can avoid layout problems. 1. The standard box model consists of content, padding, border, and margin. Width only refers to the content area by default; 2. The actual width = width padding border, margin does not participate in the calculation; 3. Use box-sizing: border-box to allow width to include padding and border; 4. Common misunderstandings include nested padding affecting alignment, percentage width calculation deviation, and table-cell is not affected by box-sizing; 5. It is recommended to set box-sizing uniformly, use developer tools to check sizes, and prioritize padding and border issues. Mastering these key points is the basis for achieving a stable layout.

The core of web page layout is actually a "box". Each element appears as a rectangular box on the page, and the size, spacing, etc. of this box are controlled by the CSS box model (Box Model). Understanding the box model is the basis for front-end layout, but many people only stay at the level of "width, height, padding and margin", and do not really understand how the various attributes affect each other.

Today we will talk in-depth about the key attributes and calculation methods of the box model, so that you no longer rely on "try" and "guess" when writing styles.

What is a box model? A list of basic structures

The box model describes how the browser calculates the total width and height of an element. The standard box model consists of four parts:

• Content area : width/height you set
• padding : space around content
• Border : The lines surrounding padding and content
• margin : the distance from other elements

When you set width: 200px; by default it is only the width of the content area, excluding padding, border and margin. So the entire box actually takes up more space than you set.

How to correctly calculate the total size of an element?

If you don't use the box-sizing property, the default box model can be confusing. Let’s take a look at an example:

 .box {
  width: 300px;
  padding: 20px;
  border: 5px solid black;
  margin: 10px;
}

So what is the actual width of this .box ?

• Content width: 300px
• Left and left padding each 20px → 40px in total
• 5px each of the left and right borders → 10px in total
• Total width = 300 40 10 = 350px

Note: margin does not participate in the size calculation of the element itself, but it will affect the overall placeholding and layout position.

In order to avoid having to calculate these values ??manually every time, many developers will add:

 * {
  box-sizing: border-box;
}

After setting this way, width and height you specify include padding and border, which means that in the above example, the total width of .box is 300px, regardless of the padding and border.

Common misunderstandings and suggestions

Sometimes, even if you use box-sizing: border-box , you may encounter confusing layouts. For example, pay special attention to the following situations:

• The padding of nested elements affects parent container alignment

  If the parent element has a fixed width, the child element has padding, which may cause visual offset or overflow.

• The percentage width is calculated differently

  When you set width: 50% , it is actually calculated based on the content area width of the parent container, not the actual width of the entire parent element. At this time, the existence of padding and border may affect the final display effect.

• Table-cell behavior is different

  The display type related to the table will not be affected by box-sizing , and its box model behavior is slightly different, so it needs attention.

Some practical suggestions:

• Unified use of box-sizing: border-box can reduce a lot of unnecessary trouble.
• For complex layouts, you can use the browser developer tool to check the "Computed Style" to confirm the actual size.
• When the layout is not aligned, priority is given to check whether padding and border are included in the width.

A brief summary

To put it bluntly, the box model is the calculation rule of the space occupied by elements in the page. Although it seems simple, if you don’t pay attention to the details, unexpected layout problems are prone to occur. Mastering the use of box-sizing , understanding the specific meaning of width and height, and how margin, padding, and border are superimposed, is the first step in writing a stable layout.

Basically, that's all, it seems basic, but there are quite a few things that are easy to ignore.

The above is the detailed content of Deep dive into the CSS Box Model properties and calculations. For more information, please follow other related articles on the PHP Chinese website!