<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.dv1 {
width: 100px;
height: 100px;
margin-top:10px;
margin-bottom: 20px;
background: red;
border: 1px solid black;
}
.dv2 {
width: 100px;
height: 50px;
margin-top: 50px;
background: green;
border: 1px solid black;
margin-bottom:30px;
}
#dvWrap{
margin-top: 5px;
background: #ccc;
}
#dvWrap2{
border:1px solid blue;
/*padding:1px;*/
margin-top: 5px;
background: #ccc;
}
</style>
</head>
<body>
<h1>1.兄弟元素外边距叠加</h1>
<h2>垂直的两个兄弟元素,红色和绿色,他们的margin-top 或 margin-bottom会重叠,且取最大的作为他们的共同间隔。</h2>
<div style="width: 200px;height: 20px;background: pink;">我是参考div</div>
<div id="dvWrap">
<div class="dv1"></div>
<div class="dv2"></div>
</div>
<h1>2.父子元素外边距叠加</h1>
<h2>而作为父子关系的元素,灰色元素在没有边框或者padding的情况下,它的margin-top和margin-bottom会跟子元素的重叠,取最大值共用。
如,这个例子,灰色的父元素margin-top:2px;而子元素的margin-top更大,所以父元素会用它红色子元素的margin-top作为父元素的margin-top。
</h2>
<h2>如果父元素有边框或者padding,父元素和子元素都会各自使用自己的margin-top和margin-bottom.如下图:</h2>
<div style="width: 200px;height: 20px;background: pink;">我是参考div</div>
<div id="dvWrap2">
<div class="dv1"></div>
<div class="dv2"></div>
</div>
<h3>
3.还发现一个问题:父元素的高度变化问题!
如果当父元素,没有border或padding的时候,如:#dvWrap没有border的时候,#dvWrap的高就是:
100+50+50+1*2+1*2 = 204;
#dvWrap设置了border:1px solid blue的时候,高就成为了204+10(红色的margin-top)+30(绿色的margin-bottom) = 244;
</h3>
</body>
</html>
css中外边距叠加问题的代码示例
最新推荐文章于 2022-01-30 15:58:42 发布