The CSS box model is the core of web page layout. Each HTML element is composed of content, inner margin, border and outer margin; 1. The element size needs to consider the influence of padding and border, and the actual width = content padding × 2 border × 2; 2. The control spacing mainly depends on margin, but attention should be paid to the problem of vertical margin merging; 3. It is recommended to use box-sizing:border-box, so that width and height include padding and content, which is easy to calculate; 4. Common problems in layout such as the default margin of paragraphs, inline-block blank gap, and flex child element margin failure, etc., which can be solved by resetting the default style, negative margin or adjusting the font size.

The core of web page layout is actually hidden in the "box" of each element. It is not difficult to understand the box model of CSS, but to be really good, especially when dealing with spacing issues, you still have to pay attention to a lot of details.

What is a CSS box model?

Simply put, each HTML element is a rectangular box on the page, which consists of four parts: content, padding, border and margin.

• Content is where you put text and pictures.
• Padding is the space between content and borders.
• Border is the border line around padding and content.
• Margin is the external distance between the box and other elements.

Many people tend to ignore the impact of padding and border on the overall size at the beginning, which leads to misalignment of layout. For example, if a div with a width of 100px is added, if padding: 10px and border: 2px solid #000 is added, its actual width is actually 124px (100 10 2 2 2).

How to control the spacing between elements?

The distance between two adjacent elements is usually controlled by margin. However, there are several common "pits" that need attention:

• Margin Collapse : Two margins in the vertical direction may merge into one, which often occurs when using multiple paragraphs or titles.
• Don't over-rely rely on margin : Sometimes it is more intuitive to control spacing using the gap attribute in flex or grid layout.
• Use box-sizing: border-box : After setting this way, width and height include padding and content, which facilitates calculating the overall size.

For example:

 .box {
  width: 200px;
  padding: 20px;
  border: 1px solid #333;
  box-sizing: border-box;
}

The above code will keep the total width of .box at 200px, regardless of padding and border.

Common spacing problems in actual layout

In real projects, these situations are often encountered:

• The gap between paragraphs is too large because the browser has added margin to the p tag by default.
• When using inline-block layout, there are inexplicable gaps between elements, which are caused by whitespace symbols in HTML.
• The margin of child elements in the flex container does not take effect? It may be interfered with by the alignment of the parent container.

Solutions to these problems include:

• Reset default margin and padding (usually written at the beginning of CSS)
• Add negative margin to the inline-block element or set the parent element font-size: 0
• Use the developer tool to check the computed style to see if margin is overwritten or invalid

In general, understanding the box model is the basis for making a good page layout. Don't underestimate it, many layout problems stem from misuse of padding, margin and box-sizing. After mastering these core concepts, even the most complex layout can be broken down step by step.

Basically that's it.

The above is the detailed content of Understanding the CSS Box Model and spacing. For more information, please follow other related articles on the PHP Chinese website!