Introduction to the

When a document is laid out, the browser’s rendering engine represents all elements as rectangular boxes, according to one of the standards, the CSS Basic Box Model. CSS determines the size, location, and properties of these boxes (such as color, background, border size…). .

Each box consists of four parts (or regions) whose respective utility is defined by their respective edges (possibly meaning to accommodate, contain, restrict, etc.). Corresponding to the four components of the box, each box has four boundaries: Content Edge, inner Margin Padding Edge, Border edge, and outer Border Margin.

  • A Content Area is the area that contains the actual content of an element.
  • The padding area extends to the border surrounding the padding. If the Content Area has a background, color, or image, those styles will extend to the padding.
  • The border area is the area that contains the border, extending the inner margin area.
  • Margin area extends the border area with a blank area to separate adjacent elements.

box-sizing

content-box

Content-box is the default. If you set the width of an element to 100px, the content area of the element will be 100px wide, and the width of any borders and margins will be added to the width of the final drawn element.

border-box

Border-box tells the browser that the border and margin values you want to set are contained within width. That is, if you set the width of an element to 100px, then the 100px will contain the border and padding. The actual width of the content area is width minus (border + padding). In most cases, this makes it easier to set the width and height of an element.

More and more

Developer.mozilla.org/zh-CN/docs/…