1、相邻块元素垂直合并：解决：尽量只给一个盒子添加margin值。
2、嵌套块元素垂直外边距的合并：若父元素没有上内边距及边框，父元素的上外边距会与子元素的上外边距发生合并，合并后的外边距为两者中的较大者。
解决：为父元素定义上边框（透明）border-top；为父元素定义上内边距padding-top；为父元素添加overflow：hidden；
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
.top,
.bottom {
height: 200px;
width: 200px;
background-color: pink;
border: 1px solid #000;
}
/* 上面元素有下边距margin-bottom，下面元素有margin-top,取得是两个值中的较大者,此现象称为垂直外边距的合并 */
.top {
margin-bottom: 100px;
}
/* 解决:只给一个盒子添加margin值
.bottom {
margin-top: 20px;
} */
.father {
height: 500px;
width: 500px;
background-color: pink;
/* border-top: 2px solid transparent; */
/* padding: 1px; */
overflow: hidden;
margin-top: 200px;
}
.son {
height:200px;
width: 200px;
background-color: red;
margin-top: 100px;
}
</style>
</head>
<body>
<div class="top"></div>
<div class="bottom"></div>
<div class="father"><div class="son">嵌套块元素</div></div>
</body>
</html>
93
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
