1、margin对于table相关类型（除了table-caption、table和inline-table这三类）的元素是不起作用的，如td、tr和th等。另外对于行内非替换元素（如span元素），垂直方向的margin是不起作用的。
2、外边距折叠
外边距折叠是指相邻的两个或多个外边距会合并成一个外边距。比如下面三个div的上外边距是相邻的，因此其边距会折叠：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="css/index.css" />
<style>
.parent{
border: 1px solid red;width: 100px;background-color: #CCC;margin: 0 100px;
}
.div1{
margin-top: 50px;background-color: green;height: 50px;width: 50px;
}
.div2{
margin-top: 100px;
width: 20px;
height: 20px;
background-color: #FF0000;
}
</style>
</head>
<body>
<div class="parent">
<div class="div1">
<div class="div2"></div>
</div>
</div>
</body>
</html>效果图：
在上面的例子中，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相加。
389
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
