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

最新推荐文章于 2022-01-30 15:58:42 发布

ForMyWebFrontSide

最新推荐文章于 2022-01-30 15:58:42 发布

阅读量378

点赞数

分类专栏： css 文章标签：外边距叠加 css

本文链接：https://blog.csdn.net/ForMyQianDuan/article/details/80109636

版权

css 专栏收录该内容

29 篇文章 0 订阅

订阅专栏

<!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>

ForMyWebFrontSide

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css中外边距叠加问题的代码示例

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;style&gt; .dv1 { width:
复制链接

扫一扫

专栏目录