超级会员免费看
本文详细介绍了CSS中的外边距合并现象，包括垂直外边距的合并规则和不同情况下的合并实例。通过学习，你可以理解为何在页面布局中元素间的间距会受到影响，以及如何控制外边距以实现期望的布局效果。
外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。
合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
外边距合并
外边距合并（叠加）是一个相当简单的概念。但是，在实践中对网页进行布局时，它会造成许多混淆。
简单地说，外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并。请看下图：
实例：
<html>
<head>
<style type="text/css">
* {
margin:0;
padding:0;
border:0;
}
#d1 {
width:100px;
height:100px;
margin-top:20px;
margin-bottom:20px;
background-color:red;
}
订阅专栏 解锁全文
扫一扫
674
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
