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相加。