关于CSS中：border和margin的问题

发布于
2017-07-03

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <style type="text/css">
        .wrapper {
            width: 100%;
            background-color: deepskyblue;
        }
        .box {
            width: 990px;
            height: 600px;
            border: solid 1px red;
            margin: 0 auto;
        }
        .test {
            margin-top: 50px;
            width: 500px;
            height: 500px;
            background-color: orange;
        }
    </style>
    <body>
        <div class="wrapper">
            <div class="box">
                <div class="test"></div>
            </div>
        </div>
    </body>
</html>

可直接复制粘贴浏览器查看。

问题：对`.test`添加`margin-top`属性，会受到.box中`boder`属性的影响。存在border属性和不存在border属性，表现的情况都不一样，这是为什么？

当border改为background背景色时，这种情况却消失了。

阅读 3.9k

3 个回答

toBeTheLight

发布于
2017-07-03

更新于
2017-07-03

垂直外边距合并可以直接去搜索搜一下这个。
或者看下这个。
mdn上也有一个定义。

发布于
2017-07-03

更新于
2017-07-03

margin collapse 的一个前提是两个 margin box 边沿邻近，4 种东西可以隔开，content、padding、border 以及 clearance。

发布于
2017-07-03

楼上说的很清楚了，顺便再提醒下楼主，可以去看看css bfc规则，搜搜理解下。

撰写回答

你尚未登录，登录后可以

和开发者交流问题的细节
关注并接收问题和回答的更新提醒
参与内容的编辑和改进，让解决方法与时俱进

推荐问题