一,折叠效应
1.在CSS
中,两个或多个毗邻的普通流中的块级盒子(可能是父子元素,也可能是兄弟元素)在垂直方向上的外边距会发生叠加,这种形成的外边距称之为外边距叠加。
二,折叠条件
1.大于等于2个元素,且相邻的两个或多个元素都需符合下面所需的折叠条件。
2.垂直方向。
3.元素处于普通流:
(浮动元素,绝对定位,固定定位不会和任何元素发生折叠,包括其相邻子元素)
4.块级元素:
(行内块级元素不会和任何元素发生折叠,包括和其相邻子元素)
5.毗邻:
(两元素之间没有padding
,没有border
,没有其他元素)
盒子的top margin
和它第一个普通流子元素的top margin
盒子的bottom margin
和它下一个普通流兄弟的top margin
盒子的bottom margin
和它父元素的bottom margin
(当父元素的height
为auto
时)
盒子的top margin
和bottom margin
,且没有创建一个新的块级格式上下文,且有被计算为0
的min-height
,被计算为0
或auto的height,且没有普通流子元素
5.注意,除以上排除的情况外,创建了BFC
的元素不会和它的第一个相邻的子元素发生外边距叠加
三,折叠的计算方式
1.取当中最大的值作为公共的margin
四,个人感受
1.目前并没有特别的地方会直接应用margin
的折叠效应,但是要知道原理,否则在碰到时不能够理解。