<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
.common{
width: 300px;
height: 300px;
background-color: pink;
}
.c1{
margin-bottom: 20px;
}
.c2{
margin-top: 10px;
}
.f{
width: 500px;
height: 500px;
background-color:pink;
}
.s{
width: 200px;
height: 200px;
margin-top: 20px;
background-color: blue;
}
.f1{
border-top: 1px solid pink; /* 第一种解决方式 设置顶部外边框, 缺点:整个父布局高度多了1px */
}
.f2{
padding-top: 1px; /*第二种解决方式 父元素顶部设置1px的padding, 缺点:整个父布局高度多了1px */
}
.f3{
overflow: hidden; /* 第三种解决方式比较完美 不会改变布局宽高*/
}
</style>
</head>
<body>
<div >
<div>---------------同一块级元素内 上下外边距合并---------------</div>
<!-- 这种情况c1的下外边距与C2的上外边距进行了合并,取最大的值 20px -->
<div class="common c1"></div>
<div class="common c2"></div>
<!-- 这种情况实际用的并不多,尽量避免即可,在设计图中看到上下外边距是20px,仅c1设置一个就好 -->
</div>
<div>------------------------目的要求:类名为s的div距类名为f的顶部div 20px---------------------------------------</div>
<div>--------------------如果仅设置s的顶部外边距则会出现异常情况: f的div距顶部20px,s紧贴顶部f的顶部-------------------------</div>
<div class="f">
<div class="s"></div>
</div>
<div>--------------------以下为三种解决方式:第一种:父元素设置border外边框-------------------------</div>
<div class="f f1">
<div class="s s1"></div>
</div>
<div>--------------------第二种:父元素顶部设置paddingtop 1px-------------------------</div>
<div class="f f2">
<div class="s s2"></div>
</div>
<div>--------------------第三种:父元素设置overflowr = hidden------------------------</div>
<div class="f f3">
<div class="s s3"></div>
</div>
</body>
</html>