相邻的两个或者多个外边距在垂直方向上合并成一个外边距,这就是所谓的外边距合并。
水平方向不存在此现象。
外边距合并产生条件:
(1).相邻的外边距之间没有非空内容、padding或者border。
(2).元素都处于文档流中,即非浮动和position属性值不为absolute和fixed的元素。
特别说明:如果元素是父子关系,子元素的padding和border并不能够消除合并现象。
合并可以存在于兄弟对象之间,也可以存在于父子对象之间,下面就分开介绍一下:
一.兄弟对象之间的外边距合并:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
div{
width:100px;
height:100px;
}
.top{
background-color:green;
margin-bottom:20px;
}
.bottom{
background-color:red;
margin-top:10px;
}
</style>
</head>
<body>
<div class="top"></div>
<div class="bottom"></div>
</body>
</html>
bottom元素的上边距和top元素的下边距产生合并现象,也就是两个元素垂直间距是20px,而不是20px+10px=30px。可以看出两个外边距的值取较大者。再来看一段代码实例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
div{
width:100px;
height:100px;
}
.top{
background-color:green;
margin-bottom:-20px;
}
.bottom{
background-color:red;
margin-top:10px;
position:relative;
left:20px;
}
</style>
</head>
<body>
<div class="top"></div>
<div class="bottom"></div>
</body>
</html>
如果外边距有正有负,那么就选取最大值正直和最小的负值相加,得出的即是两个两个边距合并的值。
再看一段实例代码:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
div{
width:100px;
height:100px;
}
.top{
background-color:green;
margin-bottom:-20px;
}
.bottom{
background-color:red;
margin-top:-10px;
position:relative;
left:20px;
}
</style>
</head>
<body>
<div class="top"></div>
<div class="bottom"></div>
</body>
</html>
如果元素的外边距都是负数,那么取最小的负数作为外边距。
二.父子外边距合并:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
#parent{
width:200px;
height:200px;
background-color:red;
}
#children{
width:60px;
height:60px;
background-color:green;
margin:0px auto;
margin-top:50px;
}
</style>
</head>
<body>
<div id="parent">
<div id="children"></div>
</div>
</body>
</html>
在以上代码中,出现了外边距和并现象,这时,子元素的外边距并不作用于父元素,而是作用于父元素之外的对象。父子外边距合并不但要满足在文章开始介绍的两条外边距合并条件,而且还要满足父元素中不能够有上下文布局属性,例如不能具有overflow(除visible)或者display:inline-block等属性。
特别说明:
以上介绍的外边距合并实例都是只涉及到两个元素,因为这在实际应用中是最常见的情况,但是外边距合并现象并非只局限于两个对象之间,只要满足外边距合并的条件就可以出现外边距合并现象,代码实例如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
.box {
border:1px solid red;
width:200px;
}
.ant {
margin-bottom:50px;
margin-top:50px;
}
</style>
</head>
<body>
<div class="box">
<div class="ant"></div>
</div>
</body>
</html>
由以上代码的运行结果可以看出,自身的外边距产生了合并现象,但是此div不能够具有高度和内容等等,因为这样上下外边距就不相邻了,外边距合并的条件就不具备了。