This is the fifth day of my participation in Gwen Challenge

Say you understand margin overlap

The margin-top and margin-bottom margins of block-level elements are sometimes merged into a single margin. This phenomenon is called “margin merging “.

A margin must be adjacent, and according to the W3C specification, two margins that are adjacent must meet the following conditions:

  • Must be block-level boxes in the regular document flow (non-float and absolute positioning) and in the same BFC.
  • There are no wire boxes, no gaps, no padding and no border to separate them.
  • Are vertically adjacent margins, which can be either of the following
  • The margin-top of the element and its child element of the first general document flow
  • The margin-bottom of the element and the margin-top of its sibling element in the next regular document flow
  • The margin-bottom of the element whose height is auto and the margin-bottom of the child element of the last regular document flow
  • Margin-top and margin-bottom of elements that have height 0 and minimum height 0 and do not contain children of the regular document flow, and do not themselves create new BFC elements

Margin merge 3 scenarios:

  1. Margin merges adjacent sibling elements. Workaround: Set block formatting Context elements (BFC)
  2. Margin merge of parent and first/last child element. Solution: For margin-top merge, you can perform the following operations (only one condition is satisfied):
  • The parent element is set to block formatting context elements; The parent element sets the border-top value;
  • The parent element sets the padding-top value;
  • Add an inline element to separate the parent element from the first child element.

For a margin-bottom merge, you can do the following (if one condition is met)

  • The parent element is set to block formatting context elements; The parent element sets the border-bottom value;
  • The parent element sets the padding-bottom value:
  • Add an inline element to separate the parent element from the last child element:
  • The parent element sets height, min-height or max-height.
  1. Margin merge of empty block-level elements. Solutions:
  • Set the vertical border;
  • Set the vertical padding;
  • Add inline elements (the Space key is useless); Set height or min-height.

conclusion

Margin overlap refers to the situation where the margins of two adjacent elements overlap in the vertical direction. Generally speaking, it can be divided into four situations:

The first is when the marin-bottom and margin-top values of adjacent siblings overlap. This can be resolved by setting one of the elements to BFC.

The second is that the margin-top of the parent element overlaps the margin-top of the child element. They overlap because they’re adjacent to each other, so we can use that to solve the problem. We can set the parent elements to border-top and padding-top to separate them, or we can set the parent elements to BFC.

Third, the margin-bottom of the parent element with height auto overlaps the margin-bottom of the child element. They overlap one because they’re adjacent, and one because the height of the parent element is not fixed. Therefore, we can set border-bottom and padding-bottom for the parent elements to separate them. We can also set a height for the parent elements. Max-height and min-height also solve this problem. Of course, setting the parent element to BFC is the easiest way.

The fourth case is the overlap between margin-top and margin-bottom of elements without content. We can solve this problem by setting the border, padding, or height