css外边距合并导致margin越界的问题

标签：方式   规范   关系   top   问题   overflow   垂直   浮动框   注意   

　　外边距合并其实经常会遇到，这里稍微总结一下，以及一些相关的术语

一、什么是外边距合并？(折叠外边距)

　　外边距合并指的是当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者；而左右外边距不合并。

　　在CSS当中，相邻的两个盒子（可能是兄弟关系也可能是祖先关系）的外边距可以结合成一个单独的外边距。这种合并外边距的方式被称为折叠，并且因而所结合成的外边距称为折叠外边距。

　　注意：只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。

　　外边距带来的影响有很多种说法，有说是margin越界，或子元素越界，也有说是外边距塌陷，但其实本质上都是外边距合并的的表现。

　　折叠结果：

　　产生折叠的原因：

而根据w3c规范，两个margin是邻接的必须满足以下条件
4.1、必须是处于常规文档流（非float和绝对定位）的块级盒子,并且处于同一个BFC当中。
4.2、没有线盒，没有空隙（clearance，下面会讲到），没有padding和border将他们分隔开
4.3、都属于垂直方向上相邻的外边距，可以是下面任意一种情况：
a:元素的margin-top与其第一个常规文档流的子元素的margin-top
b:元素的margin-bottom与其下一个常规文档流的兄弟元素的margin-top
c:height为auto的元素的margin-bottom与其最后一个常规文档流的子元素的margin-bottom
d:高度为0并且最小高度也为0，不包含常规文档流的子元素，并且自身没有建立新的BFC的元素的margin-top和margin-bottom

二、margin越界解决方案

1、给父元素加边框border

2、给父元素设置padding

3、父元素添加overflow：hidden

　　上面3种看情况使用，因为有很多可能父元素不需要这些设置的场景，比如：

　　加border可以解决，但我并不需要这个border；

　　使用paddiing，如果盒模型是内容盒子的话增大了整个盒模型，如果为border盒子类型，可以解决但是并不理想。

　　使用 overflow:hidden，可是一般情况下都是子标签内容如果超出是显示的，不符合预想。

4、父元素加前置内容生成（推荐）

　　关键代码：使用伪类元素

父元素：before{
    content:‘ ‘;
    display:table;
}

css外边距合并导致margin越界的问题

标签：方式   规范   关系   top   问题   overflow   垂直   浮动框   注意   

原文地址：https://www.cnblogs.com/goloving/p/12859232.html