Reading Precautions

  1. This article relies on CSS2.1 Specification 8. Box Model and CSS Box Model Module Level 3.
  2. The overall details and theories of this article may seem boring, but I will try to keep the logic simple. Personally, it is necessary to read boring theoretical articles sometimes.
  3. The main purpose of writing this article is to improve my knowledge system. So I hope you can point out the inadequacies in the article.
  4. Permanent Blog address

introduction

Box Model is one of the core concepts in CSS. This article mainly describes the box Model in CSS.

Before reading this article, you can answer the following questions for yourself:

  1. What is box Model? What does the Box Model include? What does it do? At what point does it appear when the browser processes the document? What are the next steps?
  2. What are the details of the collapse margin?

What is a box model?

CSS2.1 Specification 8. Box Model

The CSS box model describes the rectangular boxes that are generated for elements in the document tree and laid out according to the visual formatting model.

Box Models are used to describe the rectangular boxes generated by elements in the DOM tree, and UAs arranges the boxes according to visual formatting Models.

Box Dimension

This section is used to describe specific rectangular boxes, each box will have 4 areas:

  • content area
  • padding area
  • border area
  • The size of each area is determined by its relative properties. In additionpadding.border.marginIt can be divided intotop, bottom, left, rightFour small areas defined by specific attributes.

Edge: The perimeter of each box is called edge, or edge. Accordingly, we can know that each box will have four edges.

  • Content Edge or inner Edge: The size of the content area is defined by the element by defaultwidth 和 heightTwo attributes, the content of the element and its containing block determine
  • Padding Edge: The padding Edge defines the element’s padding box (including content and padding Area).
  • Border Edge: Border edge defines the element’s border box (containing content, padding, and border area).
  • Margin edge or outer edge: If the margin width is 0, then the margin area is the same as the padding area

Note: The background styles of a box’s content area, padding area and border area are determined by the element’s background attribute. That is, background extends all the way to the border area by default, while margin is always transparent. In CSS3, we can use the new background property to change the default.

CSS Box Model 3 When a box fragments — is broken, as across lines or across pages, Into separate box fragments — each of its boxes (content box, padding box, border box, margin box) also fragments. How the content/padding/border/margin areas react to fragmentation is specified in [css-break-3] and controlled by the box-decoration-break property.

This section mainly talks about how a box will be divided into multiple box fragments when it crosses lines or pages. Then how should the content, padding, border and margin of the box be represented in different box fragments? These are defined in CSS-break-3 and can be controlled using box-decoration-break. This scenario is also described in CSS2.1, and 8.6 describes how the inline box model should behave when it crosses lines.

Margin properties:margin-top.margin-bottom.margin-left.margin-right 和 margin

All of these properties are familiar from the beginning. Therefore, only a few considerations are emphasized here: first, look at the definition of attributes

'margin-top'.'margin-bottom'.'margin-left'.'margin-right'
Value:  	`<margin-width>` | inherit
Initial:  	0
Applies to:  	all elements except elements with table display types other than table-caption, table and inline-table
Inherited:  	no
Percentages:  	refer to width of containing block
Media:  	visual
Computed value:  	the percentage as specified or the absolute length
Copy the code
  1. valueCan be<margin-width>, including three specific values:
    • <length>: Specifies a fixed width, for example3px.1emEtc.
    • <percentage>: Percentage the value ranges fromcomputed valueConverted toused valueThe cardinality is zerogenerated box's containing blockthewidthIf the width of a containing block depends on the element, it is not defined in CSS 2.1.
    • Auto, I’ll talk about that later
  2. margin-top 和 margin-bottomfornon-replaced inline elementsIt doesn’t work.
  3. In CSS3, these properties are called the physical Margin property. It also introduces the corresponding logical margin attribute, such asmargin-block-start.margin-block-endThese attributes are the same as the document’swriting modeRelated). Logical margin and physical margin control the same margin area, just in different forms. CSS3 added this feature because documents are arranged differently in different countries, such as Arabic, which is written from right to left.)

Note: The margin-trim attribute added in CSS3 is not covered here because it is currently not supported by any browser (current date is February 2019).

collapsing margins

In CSS, the vertical margins of two or more adjacent boxes are merged into a single margin, which is called collapse margin. First, let’s highlight some exceptions where margins don’t merge:

  1. Horizontal margins will not collapse
  2. There are two cases in which the adjacent vertical margin does not collapse:
    • The margin of the root element box does not collapse.
    • If one comes with clearanceclearThe top margin and bottom margin of the element have adjacent margins. The relevant margins of the element will be merged with the adjacent margins of the adjacent sibling element, but the merged margins will not be merged with the lower margins of the parent block

So, how do you determine whether the margin of the two boxes is adjacent? The following conditions should be met simultaneously:

  • Both boxes are in-flow.block-level boxesAnd in the same placeblock formatting model.
  • There is noline box.clearance.padding.borderSpacing them out (height zero hereline boxWill be ignored).
  • Are vertically adjacent box boundaries, that is, satisfying one of the following conditions:
    • The upper margin of the box and its firstin-flowThe upper margin of the child node
    • The lower margin of the box is adjacent to the next onein-flowThe upper margin of a sibling node in
    • The lower margin of the box (and the box’s height computed value is auto) and the last onein-flowThe lower margin of the child node
    • The upper and lower margins of the box, if the box is not newblock formatting model.min-heightIs 0, and the computed value of height is0orauto, there is noin-flowChild node.

Note also that a folded margin can be adjacent to another margin as long as any part of the margin is adjacent to the other margin.

Note: From the definition of collapse margin above, we can draw the following conclusions:

  • Adjacent margins can be generated between elements that do not have a sibling or ancestor relationship
  • floated boxMargin and any other box margin will not merge (including its stream child node) –becausefloat boxIt’s not in-stream.
  • The margin of an absolutely positioned box will not merge with the margin of any other box (including child nodes in its stream) – again because the absolutely positioned box is out-of-stream.
  • To set up newblock formatting contextWreckbox elements’ margins will not be merged with those of the stream’s child nodes (such as Wreckbox)
  • inline-blockThe margin of a box will not be merged with the margin of other boxes (including its in-stream child nodes) –Created a newblock formatting modelAnd are notblock-level box.
  • in-flow block-level boxThe lower margin of thein-flow block-levelThe upper margin of a sibling is merged unless the sibling existsclearance
  • in-flow block elementThe upper margin of will be the same as that of its first in-stream child nodeblock-levelBox), where the element does not existtop borderThere is notop paddingAnd the child node does not have eitherclearance
  • aheightforautoandmin-heightfor0thein-flow block-level boxthebottom marginWill be the last one with itFlow within the block - levelOf the child nodebottom marginMerge, provided that the box does notbottom padding.bottom borderAnd its child nodebottom marginNo merge with top Margin which has Clearance
  • The margins of the box itself will also merge, ifmin-heightfor0, has neither top or bottom border nor inside margin, height is 0 or auto, and contains no line box (and margins for all children in the stream are merged)

So how to value the combined margin?

  • When two or more margins merge, the width of the collapsed margin is the maximum of the combined margins
  • If there is a negative margin, subtract the maximum absolute value of the negative adjacent margin from the maximum in the positive adjacent margin
  • If there is no positive margin, subtract 0 from the largest absolute value of the adjacent margin

Let’s discuss the final special case: if a box has adjacent margins, then it is possible that the margin merge will penetrate the box. In this case, the position of the element depends on the relationship between the other elements of the merged margin:

  • If the margins on this element are merged with the top margin on the parent element, the box’s top border edge is the same as the top border edge on the parent element
  • Otherwise, either the parent element is not involved in margin collapse, or only the parent element’s bottom margin is involved. The top edge of the element is the same as the bottom border of the element if it is not 0.

Note that the position of the element crossed by the folded margins does not affect the position of the other elements whose margins are being merged, and that the position of the upper border is only the descendant of the elements used to lay out those elements.

Padding attributes:padding-top.padding-right.padding-bottom.padding-left 和 padding

The padding property defines the width of the inside margin area of the box.

'padding-top'.'padding-right'.'padding-bottom'.'padding-left'Value: `<padding-width>` | inherit Initial: 0 Applies to: Inherited: Table row, table header-group, table footer-group, table row, table column-group, and table-column No Percentages: reference to the width of the contained block Media: Visual Computed Value: specified percentage or absolute lengthCopy the code

The padding and margin attributes are different in the following ways:

  1. The padding is not thereauto
  2. The padding value cannot be negative
  3. Different ranges of elements apply

Margin = margin; margin = margin; margin = margin; margin = margin

Note: The padding-top and other attributes are still physical. Add logical padding-padding-block-start to CSS3.

Border properties

'border-top-width'.'border-right-width'.'border-bottom-width'.'border-left-width'Value: ` < border - width > ` | inherit Initial: medium Applies to: all elements Inherited: no Percentages: N/A Media: Visual Computed Value: Absolute length, or'0'If border style is'none'or'hidden'ifCopy the code

For border-width, note:

  1. <border-width>Only keywords and<length>The two choices, the key word isthin.medium.thick, the size increases in turn, which is determined by the user agent
  2. The border width cannot be negative
'border-top-color'.'border-right-color'.'border-bottom-color'.'border-left-color'
Value:  	`<color>` | transparent | inherit
Initial:  	'color'Property values apply to: All elements Inherited: no Percentages: N/A Media: Visual Computed Value: From'color'Property value, take'color'Otherwise, press the specified valueCopy the code

Note here that the initial value of border-color is the value of the color attribute, which can sometimes be used for special purposes.

The box model of an inline-level element in a bidirectional context

For each line box, the UAs must render margin, border, and padding in visual order (rather than logical order) for the inline box generated for each element:

  • direction: ltr: The left-most generated box of the first line box in which the element appears has a left margin, a left border, and a left inner margin, and the last right-most generated box of the element has a right inner margin, a border, and a right margin
  • direction: rtl: The box generated at the right end of the first line box in which the element appears has a right margin, a border, and a right margin, and the box generated at the left end of the last line box in which the element appears has a left margin, a left border, and a left margin

reference

  1. CSS Box Model Module Level 3
  2. This box model
  3. CSS Display Module Level 3
  4. CSS Flexible Box Layout Module Level 1