web前端笔记-css之margin

1、margin对于table相关类型（除了table-caption、table和inline-table这三类）的元素是不起作用的，如td、tr和th等。另外对于行内非替换元素（如span元素），垂直方向的margin是不起作用的。

2、外边距折叠

外边距折叠是指相邻的两个或多个外边距会合并成一个外边距。比如下面三个div的上外边距是相邻的，因此其边距会折叠：

效果图：

在上面的例子中，div1和div2的margin-top是相邻的，最后会折叠成一个margin-top，其值为两者中较大的值。

判断外边距是否相邻，其规则可以总结为以下两点：

①这两个外边距没有被非空内容、padding、border或clear属性所隔开。

②这些margin都处于常规流（in-flow）中，他们可以是相邻的节点，也可以是父子节点。

满足这两个条件的margin我们称其为相邻的。

此时，当我们给div1加上以下样式时

border: 1px solid;

div2的上外边距就不在与div1发生折叠了 ，于是效果变为了如下：

同样道理，如果为div1添加padding-top或者文字内容，都会使得折叠失效。另外，由于浮动元素、inline-block元素和绝对定位元素不属于当前普通流，因此它们也不会和垂直方向上的其他margin折叠。

【外边距折叠计算规则：】

①当这些margin均为正值时，取margin中的最大值。

②当margin中正负值都存在时，先取出负margin中绝对值最大的，然后和正margin值中最大的margin相加。