What is margin collapse? Under what circumstances does it appear? How to deal with it?

This article will take you to understand the CSS box model and introduce what is margin collapse? Under what circumstances does margin collapse occur? And talk about solutions.

In CSS, all elements are surrounded by "boxes" one by one. We widely use two kinds of "boxes" - block-level boxes (block box) and inline box (inline box).

What is the CSS box model?

In CSS, the box model is used during design and layout.

The definition of the box model can be divided into these parts:

• Content box: This area is used to display content, and the size can be set by width and height.
• Padding box: The blank area enclosed outside the content area; the size is set through the padding related properties.
• Border box: Wrap content and padding. The size is set via the border related properties.
• Margin box: This is the outermost area, the blank space between the box and other elements. The size is set via the margin related properties.

Block-level boxes fully apply the CSS box model, while inline boxes only use part of the content defined in the box model.

box-sizing

box-sizing attribute defines how the browser should calculate the total width of an element and total height.

• content-box (default value) , which is the standard box model, width: 100px refers to the content area 100px wide.
  • The size of the box = content(100px) padding border
• border-box, which is the alternative (IE) box model, width: 100px refers to the sum of the content area border inner margins being 100px wide.
  • The size of the box = content padding border = 100px

No matter which model, margin is not included in the actual size - Of course, it will affect the space occupied by the box on the page, but it will affect the space outside the box.

display

Here you can add a concept - internal and external display types.

• External display type, we set the display attribute of the box, such as inline or block , to control whether the box is inline or block level.
• Internal display type, which determines how the elements inside the box are laid out.

If display: flex is set, on an element, the external display type is block, but the internal display type is changed to flex. All direct child elements of the box will become flex elements and will be laid out according to the rules of the flexible box (Flexbox).

There is also a special value -- display: inline-block, which provides an intermediate state between inline and block. This is very useful for the following situations: no line wrapping occurs, but the width and height can be set, which means that some block-level effects are achieved:

• Settingwidth and ## The #height property will take effect.
• padding, margin, and border push other elements away.

Inline elements/block-level elements

In HTML4, elements are divided into two categories:

inline (inline elements) and block (block-level element).

1. What are inline elements?

An inline element only occupies the space contained by the border of its corresponding label.

Common inline elements include

a, b, span, img, strong, sub sup、 button、 input、 label、 select、 textarea

2. What are block-level elements?

A block-level element occupies the entire space of its parent element (container), thus creating a "block". Usually browsers will add a new line before and after block-level elements.

Common block-level elements include

div, ul, ol, li, dl, dt, dd, h1, h2, h3, h4 , h5、h6 、p

3. The difference?

• Format (by default), inline elements will not wrap, but block-level elements will.

• On content (by default), inline elements can only contain data and other inline elements. Block-level elements can contain inline elements and other block-level elements.

• On attributes:

  • Inline elements
    • width and height settings are invalid (line-height can be set),
    • inner margin (padding), outer margin (margin) and borders (border) in the up and down direction will not affect other elements.
  • Block-level elements
    • width and height properties come into play,
    • Padding (padding), margins (margin), and borders (border) will "push" other elements away from the surroundings of the current element

Margin (margin) collapse

block The top margin (margin-top) and bottom margin (margin-bottom) are sometimes merged (collapsed) into a single margin whose size is the maximum of the single margin (or If they are equal, then only one of them), a behavior called margin collapsing.

What will happen

The vertical margin of two or more adjacent block elements in the ordinary flow will collapse

• Adjacent: Refers to not being separated by non-empty content, padding, border or clear
• Vertical direction: Refers to only vertical margins. How will

be solved?

• The element BFC created and its children/siblings will not be collapsed

• Settingspadding / border, some specific scenarios:

  • # of the parent element ##margin-top overlaps with the child element's margin-top.

    The overlap occurs because they are adjacent, so we can solve the problem through this. We can set the

    border-top and padding-top values ​​for the parent element to separate them.

  • The

    margin-bottom of the parent element with a height of auto overlaps with the margin-bottom of the child element.

    One overlap occurs because they are adjacent, and the other is because the height of the parent element is not fixed. So we can set

    border-bottom, padding-bottom for the parent element to separate them, or we can set a height for the parent element, max-height and min-height can also solve this problem.

  • is an element without content, and its own

    margin-top and margin-bottom overlap.

    We can solve this problem by setting

    border, padding or height for it.

Factors that trigger BFC

• float (Except none)
• overflow (Except visible)
• display (table-cell / table-caption / inline-block)
• position (except static / relative)

For more programming-related knowledge, please visit:

Programming Video! !

The above is the detailed content of What is margin collapse? Under what circumstances does it appear? How to deal with it?. For more information, please follow other related articles on the PHP Chinese website!