Managing the CSS Box Model

CSS Box Model: The Key to Understanding Web Layout

The most important thing about understanding CSS is: Everything is a box. More specifically, each element in the document generates a box. This box can be a block-level box or an inline-level box. The type of box determines how elements affect the page layout. The CSS box model is a concept used to describe the layout and size of HTML elements. Each element contains a box for its content, fill, border, and margins. These boxes are combined to determine the layout of the element's content and how adjacent elements appear side by side with them:

Whether the element creates a box and which type of box is created will depend on the markup language. CSS evolved into a way to style HTML documents, so many CSS visual rendering models originate from HTML distinguishing between block-level and inline elements. By default, elements such as <code><p></p> and <section></section> create block-level boxes, but <a></a>, <span></span>, and <em></em> create inline boxes. On the other hand, SVG does not use box models, so most layout-related CSS properties cannot be used with SVG.

The block-level box creates new content blocks, as shown in Figure 4.1. The rendering of the block-level box is vertical, arranged in order of its source, and (except for the table) expands to fill the available width of its contained elements. This is called a normal stream. The display value of the block-level box is block, list-item, table, or any table-* value (for example, table-cell).

Figure 4.1. Block-level box containing h1, p, ul, and table elements within the element (gray area)

In contrast, inline-level boxes do not form new content blocks. Instead, these boxes form rows within block-level boxes. They display and fill in the width of the box horizontally and will wrap if needed, as shown in Figure 4.2. The display value of the inline-level box is inline, inline-block, inline-table or ruby.

Figure 4.2. Example of an inline box with margin: 1em and padding: 5px applied

But how is the size of the box calculated? This is where things get more complicated. As shown in Figure 4.3, the box size is the sum of the box content area, fill width, and border width. Margin width creates a margin box for an element and affects other elements in the document; however, the margin width has no effect on the size of the box itself.

Figure 4.3. CSS 2.1 Box Model

For example, a <code>width: 300px element with padding: 20px, border: 10px and <code><p></p> has a calculated width of 360 pixels. This is the sum of its width, left and right fill, and left and right border width properties. To create an element with a width of 300 pixels, a fill of 20 pixels and a border of 10 pixels, the width needs to be set to 240px. This is how most mainstream browsers calculate widths. To solve some of the problems with the competition model among browsers, the CSS Working Group introduced the box-sizing attribute. It allows us to choose our favorite box model implementation and greatly simplify the calculations when dealing with responsive design.

Using box-sizing Select Box Model

box-sizing Properties are defined in the CSS Basic User Interface Module Level 3 specification. It has two possible values: content-box and border-box. Initially, the value of box-sizing is content-box. When using this value, setting the width and height properties of an element affects the size of its content area. This matches the behavior defined in the CSS 2.1 specification and is the default behavior in modern browsers (as shown in Figure 4.4). Setting the value of box-sizing to border-box will produce some magical effects. The values ​​of width and height are now applied to the outer border edge instead of the content area. The border and fill are drawn inside the element box, matching the old Internet Explorer 5.5 behavior. Let's look at an example of a mix of fill and borders using percentage width and px units:

<div class="wrapper">
  <article>
    <h2>This is a headline</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing ...</p>
  </article>
  <aside>
    <h2>This is a secondary headline</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing ...</p>
  </aside>
</div>

Our

and <article> elements both apply the following CSS, which gives us the layout shown in Figure 4.5, where the first element has a width of 60% and the second element has a width of 60% 40%: <aside>

article, aside {
  background: #FFEB3B;
  border: 10px solid #9C27B0;
  float: left;
  padding: 10px;
}
article {
  width: 60%;
}
aside {
  width: 40%;
}

Figure 4.5. Element use box-sizing: content-box

By default, the

and <aside> values ​​of <article> are both box-sizing. The content-box and border-width values ​​increase the width of each element by 40 pixels, which greatly affects the 60%/40% segmentation. Now let's add padding to box-sizing: border-box and <article> elements: <aside>

article, aside {
  box-sizing: border-box;
}

You can see the change in Figure 4.6: the element has the same width, but

means that the width includes borders and padding. Because the box-sizing: border-box attribute is applied to border edges rather than content areas, our elements are now arranged side by side. width

Figure 4.6. Element use box-sizing: border-box

I recommend that you use box-sizing: border-box in your project. It makes life easier because there is no need to calculate width values ​​to consider the values ​​of fill and borders, and the box behavior is more predictable. The best way to apply box-sizing: border-box is to use reset rules. The following example comes from Chris Coyier's CSS-Tricks article "Inheriting box-sizing may be slightly better - best practices":

<div class="wrapper">
  <article>
    <h2>This is a headline</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing ...</p>
  </article>
  <aside>
    <h2>This is a secondary headline</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing ...</p>
  </aside>
</div>

This applies the border-box size to each element by default without affecting the box-sizing behavior of existing parts of the project. If you know there will be no third-party or legacy components that rely on the content-box behavior, you can simplify these rules:

article, aside {
  background: #FFEB3B;
  border: 10px solid #9C27B0;
  float: left;
  padding: 10px;
}
article {
  width: 60%;
}
aside {
  width: 40%;
}

The management box model is just one element in understanding how to create complex layouts.

FAQs about CSS Box Models (FAQ)

(The FAQ part is omitted here because the article is too long and does not match the pseudo-original goal. The FAQ part can be added or modified as needed.)

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