相关知识点:
块级元素的上外边距(
margin-top
)与下外边距(
margin-bottom
)有时会合并为单个外边距,
这样的现象称为
“margin
合并”
。
产生折叠的必备条件:
margin
必须是邻接的
!
而根据
w3c
规范,两个
margin
是邻接的必须满足以下条件:
•
必须是处于常规文档流(非
float
和绝对定位)的块级盒子,并且处于同一个
BFC
当中。
•
没有线盒,没有空隙,没有
padding
和
border
将他们分隔开
•
都属于垂直方向上相邻的外边距,可以是下面任意一种情况
•
元素的
margin-top
与其第一个常规文档流的子元素的
margin-top
•
元素的
margin-bottom
与其下一个常规文档流的兄弟元素的
margin-top
•height
为
auto
的元素的
margin-bottom
与其最后一个常规文档流的子元素的
margin-bottom
•
高度为
0
并且最小高度也为
0
,不包含常规文档流的子元素,并且自身没有建立新的
BFC
的元素的
margin-top
和
margin-bottom
margin
合并的
3
种场景:
(
1
)相邻兄弟元素
margin
合并。
解决办法:
•
设置块状格式化上下文元素(
BFC
)
(
2
)父级和第一个
/
最后一个子元素的
margin
合并。
解决办法:
对于
margin-top
合并,可以进行如下操作(满足一个条件即可):
•
父元素设置为块状格式化上下文元素;
•
父元素设置
border-top
值;
•
父元素设置
padding-top
值;
•
父元素和第一个子元素之间添加内联元素进行分隔。
对于
margin-bottom
合并,可以进行如下操作(满足一个条件即可):
•
父元素设置为块状格式化上下文元素;
•
父元素设置
border-bottom
值;
•
父元素设置
padding-bottom
值;
•
父元素和最后一个子元素之间添加内联元素进行分隔;
•
父元素设置
height
、
min-height
或
max-height
。
(
3
)空块级元素的
margin
合并。
解决办法:
•
设置垂直方向的
border
;
•
设置垂直方向的
padding
;
•
里面添加内联元素(直接
Space
键空格是没用的);
•
设置
height
或者
min-height
。
回答:
margin
重叠指的是在垂直方向上,两个相邻元素的
margin
发生重叠的情况。
一般来说可以分为四种情形:
第一种是相邻兄弟元素的
marin-bottom
和
margin-top
的值发生重叠。这种情况下我们可以
通过设置其中一个元素为
BFC
来解决。
第二种是父元素的
margin-top
和子元素的
margin-top
发生重叠。它们发生重叠是因为它们是
相邻的,所以我们可以通过这
一点来解决这个问题。我们可以为父元素设置
border-top
、
padding-top
值来分隔它们,当然
我们也可以将父元素设置为
BFC
来解决。
第三种是高度为
auto
的父元素的
margin-bottom
和子元素的
margin-bottom
发生重叠。它们
发生重叠一个是因为它们相
邻,一个是因为父元素的高度不固定。因此我们可以为父元素设置
border-bottom
、
padding-bottom
来分隔它们,也可以为
父元素设置一个高度,
max-height
和
min-height
也能解决这个问题。当然将父元素设置为
BFC
是最简单的方法。
第四种情况,是没有内容的元素,自身的
margin-top
和
margin-bottom
发生的重叠。我们可
以通过为其设置
border
、
padding 或者高度来解决这个问题。
(完结)
我的小程序希望大家多多扫码支持下