Home > Article > Web Front-end > 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
).
In CSS, the box model is used during design and layout.
The definition of the box model can be divided into these parts:
width
and height
.padding
related properties. border
related properties. 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. 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. 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.
display
attribute of the box, such as inline
or block
, to control whether the box is inline or block level. 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:
width
and ## The #height property will take effect.
,
margin, and
border push other elements away.
inline (inline elements) and
block (block-level element).
a,
b,
span,
img,
strong,
sub
sup、
button、
input、
label、
select、
textarea
div,
ul,
ol,
li,
dl,
dt,
dd,
h1,
h2,
h3,
h4 ,
h5、
h6 、
p
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:
width
and height
settings are invalid (line-height can be set), padding
), outer margin (margin
) and borders (border
) in the up and down direction will not affect other elements. width
and height
properties come into play,padding
), margins (margin
), and borders (border
) will "push" other elements away from the surroundings of the current element 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.
The vertical margin of two or more adjacent block elements in the ordinary flow will collapse
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.
border-top and
padding-top values for the parent element to separate them.
margin-bottom of the parent element with a height of
auto overlaps with the
margin-bottom of the child element.
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.
margin-top and
margin-bottom overlap.
border,
padding or height for it.
(Except none)
(Except visible)
(table-cell / table-caption / inline-block)
(except static / relative)
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!