Looking through the blog, I found that the explanation of the CSS box model is a little out of date, so I want to update it and correct it.

2 box models

First of all, there are two types of CSS box models: standard box model (W3C standard box model) and weird box model (IE model) :

The term “Quirks box model” is a Local Quirks mode that Internet Explorer uses to display pages from older browsers that are compatible with versions below Internet Explorer 6. Now that most pages have followed the W3C standard, weird patterns are rare, and can be triggered only when very old pages need to be supported using the

tag (see MDN for details). The odd box model we see in blogs is basically using box-sizing to change the default height and width of the box. It is not actually found in MDN or W3C standards.

Not only the content – box, border – box

Another thing THAT I find common in blogs is just content-box and border-box:

Those familiar with box-sizing should know that content-box and border-box are the two values, and that browsers use content-box by default.

But in fact, according to the CSS standard, the box model is defined much more than these two boxes.

Generally speaking, each box has a content Area where images, text, and other elements can be inserted. Outside of the content area, there can be padding, border, and margin areas. These areas are optional (the size can be 0). In particular, margin can be negative.

To illustrate this point, the concept of edge is first introduced. In plain English, a square box has four sides, and a nested box has to separate that side from that side into the “box” we refer to. There are 4 boundaries, which are the 4 different colored squares or boxes shown above. :

  1. content / inner edge
  2. padding edge
  3. border edge
  4. margin / outer edge

Based on these four boundaries, the following four boxes in the box model are generated:

  1. Content-box: The white box in the image abovewidth.heightOr the size of the contents contained.
  2. Padding-box: The red border in the image abovepadding“Or some of the browser’s built-in Settings.
  3. Border-box: The blue border in the image aboveborder“Or some of the browser’s built-in Settings.
  4. Margin-box: the green border in the image abovemargin“Or some of the browser’s built-in Settings.

There are also three boxes in SVG with different names that are treated as one of the above:

  1. A fill-box is an area used to fillcontent-boxTo deal with.
  2. Stroke-box: the part of the strokeborder-boxTo deal with.
  3. View-box: The area in which SVG content can be displayed (think of a screenshot like box) asborder-boxTo deal with.

Then you can go on to discuss the definition of padding, margin, etc… I won’t say more here.