CSS 新手容易误踩的margin地雷

在练习的过程中，踩到了margin的地雷。

明明属性值都对，在chrome的开发人员工具看，也都正常。

但版型就是不对，花了一段时间才找到原因。

来看看问题是怎么发生的。

HTML

<div class="box-black">        <div class="box-red"></div>    <div class="box-blue"></div></div>

CSS

html {  background-color: chartreuse;}* {  box-sizing: border-box;}.box-black {  width: 300px;  height: 300px;  background-color: black;  margin-top: 20px;}.box-red {  height: 100px;  background-color: red;}.box-blue {  height: 100px;  background-color: blue;}

引入ResetCSS.css。

为了显示页面(HTML)背景，特意显示为萤光绿。

一开始的页面。

完全贴齐页面的上边界与左边界。

在.box-black设定

margin-top: 20px;

资讯显示，margin-top是20px，.box-black的确是有往下推移。

接着，把margin-top: 20px的设定从.box-black移除。

再将margin-top: 20px加入.box-red。

.box-black {  width: 300px;  height: 300px;  background-color: black;      }.box-red {  height: 100px;  background-color: red;  margin-top: 20px;}

页面应该是这样，没错。

.box-black没有设定margin-top，所以会贴齐上边界。
.box-red设定margin-top: 20px，所以会向往下推移20px。

错，真正的页面是这样。

咦！怎会这样？

.box-black没有margin-top设定，却往下推移了。

.box-red没有在.box-black里面向下推移，不仅贴齐.box-black上边界。

而且，它还把.box-black往下推移。

这是怎么一回事？

我们在.box-black设定

margin-top: 10px;

.box-black的margin-top有出现，但还是被推移超过10px的範围。

所以，我的推测是，.box-red与.box-black的margin-top重叠了，导致这样的结果。

那我们将.box-black的margin-top改成50px。

.box-black往下推移50px。

所以不只重叠，还以数值大的为主。

但，.box-red无法在.box-black里面，往下推移的问题还是没有解决。

我们在.box-black加入

padding-top: 10px;

.box-red往下推移了，但间距似乎有点大。

来看看细节。

.box-red推移範围超过20px，我们再看看.box-black的部分。

可以很明显的看出，.box-black的padding-top将.box-red往下推10px，并且margin-top将自身往下推50px。

而且.box-black的padding-top与.box-red的margin-top并没有重叠。

所以只要使用padding将两个同边的margin隔开，这个问题就可以解决了。

.box-black {  width: 300px;  height: 300px;  background-color: black;  padding-top: 20px;}.box-red {  height: 100px;  background-color: red;      }

页面就会这样。

利用.box-black的padding-top去推移.box-red，而不要使用.box-red的margin-top。

刚刚是父层与子层的关係，现在来看同层的关係。

.box-red { height: 100px; background-color: red; margin-bottom: 10px;}.box-blue {  height: 100px;  background-color: blue;  margin-top: 10px;}

有了刚刚的观念，这次.box-red与.box-blue的间距，绝对不会是20px，是吧。

没错，确实如此，它们的margin重叠了，间距只有10px。

修改.box-red

margin-bottom: 50px;

同样地，间距会以数值大的那方为主。