css中外边距叠加问题的代码示例

<!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中外边距叠加问题的代码示例

猜你喜欢
