Why does a box with a width of 100px be displayed wider? Because the default content-box model is used, the actual width includes content, padding and border. 1. By default, box-sizing is content-box, and the width set only refers to the content area. padding and border will add additional overall width; 2. Use border-box to make the width set include content, padding and border, and the layout is more intuitive; 3. It is recommended to set box-sizing: border-box globally to avoid layout misalignment, which is especially suitable for responsive design; 4. Content-box can be used in special scenarios, but the two modes should be avoided.

When I first started learning CSS, many people would encounter a question: Why did I set a box with a width of 100px, but it actually showed that it was wider than 100px? This is most likely because you don't understand the role of the box-sizing property. It determines how to calculate the width and height of the element, which directly affects the layout effect.

By default, all elements are content-box , which means only the size of the content area. But if you change to border-box , the entire calculation method will change - the width and height at this time include content, padding and border.

Let’s talk about the differences between these two values ??and which scenario is better to use.

What is content-box ?

This is the default box model for the browser. When you set the width of an element to width: 200px , its content area is 200px wide. If padding or border is added, the overall size will become larger.

For example:

 .box {
  width: 200px;
  padding: 10px;
  border: 5px solid #000;
}

In content-box mode, the actual width of this box is: 200px (content) 2×10px (left and right padding) 2×5px (left and right border) = 230px

This pattern is suitable for scenarios where precise control over the size of the content area, such as table cells, certain layout components.

Why do you prefer to use border-box ?

Many front-end developers will set it globally to border-box at the beginning of the project, because it is easier to control the overall size. In this mode, regardless of whether there is padding and border, the width and height you set are the ultimate display width and height.

As for the example above, after changing to border-box :

 .box {
  box-sizing: border-box;
  width: 200px;
  padding: 10px;
  border: 5px solid #000;
}

The total width of this box is still 200px. The system will automatically "compress" the space from the content area to padding and border.

The benefits are obvious:

• The layout is more intuitive, without manual addition and subtraction
• Easier to control proportions in responsive design
• Avoid misalignment of layout due to adding borders or inner margins

This is also why many CSS frameworks (such as Bootstrap) use border-box by default.

Practical usage suggestions

If you're just getting started with CSS, it's recommended to add this setting to the global style from the beginning:

 * {
  box-sizing: border-box;
}

This can avoid a lot of confusion about "why the box has become wider". Of course, some special scenarios may still require content-box , such as if you want to control the size of the content area separately, or do some complex elastic calculations.

A few suggestions:

• Unified use of border-box is a standard practice for modern development
• Don't mix the two modes easily unless there is a clear requirement.
• If you need to dynamically adjust the box size, please pay attention to using width , max-width and other properties in conjunction with the

In general, although box-sizing seems to be a small property, it affects the layout logic of the entire page. Understanding the difference between content-box and border-box can help you avoid many pitfalls when writing layouts. Basically all this is not complicated but easy to ignore.

The above is the detailed content of Understanding the css box-sizing property: content-box vs border-box. For more information, please follow other related articles on the PHP Chinese website!