流畅易懂CSS教程·margin

作为页面设计的一个重要属性，主要用于控制控件之间的距离，开发中超级无敌常用，所以要认真学习！

1 定义

margin，外边距，指本元素边框向外的距离。

而在实际使用中，可以朝四个方向设置外边距，如下所示。

也许有的小伙伴已经在开发中使用过，觉得简单，不就是设置与其他元素的距离而已嘛，有什么难的？

我起初也这么认为，但是在深入学习后，发现margin在不同情况下，会采取不同的机制，这也会对我们未来的开发有着很重要的影响。

话不多说，我们直接从实际使用中去探讨该属性的使用。

2 单元素的情况

这是最简单的一种情况。

首先准备基本要素，

<div style="width:100px;
            height:100px;
            background:red;">
            </div>

效果如下，只有一个红色正方形方框，紧贴边缘。

2.1 margin-top：向上的外边距

可以通过两种方式设置向上的外边距。

<div style="width:100px;
            height:100px;
            background:red;
            margin-top:50px;">
            </div>

通过margin-top设置向上的边距，也可以通过margin-left、margin-right、margin-bottom设置向左、向右、向下的边距。

设置外边距还有如下的方法，

<div style="width:100px;
            height:100px;
            background:red;
            margin:50px 0 0 0;">
            </div>

通过设置margin属性第一个变量值，可以设置向上的外边距。其中四个数值分别对应上，右，下，左四个方向。

效果如下图，

2.2 设置其它边距

如上的设置方式，我们还可以设置其他方向的边距。

<div style="width:100px;
            height:100px;
            background:red;
            margin-top:50px;
            margin-right:50px;
            margin-bottom:50px;
            margin-left:50px;">
            </div>

或者如下

<div style="width:100px;
            height:100px;
            background:red;
            margin:50px 50px 50px 50px;">
            </div>

效果如下图，因为边距是透明的，虽然我们设置了右边和下边的边距，但是在单个元素中看不出效果。

设置margin的方法还有以下几种：
（1）同时给上下左右设置外边距：
margin:50px;
等价于
margin:50px 50px 50px 50px
（2）同时给上下（左右）设置外边距：
margin:50px 0
等价于
margin:50px 0 50px 0
这就是单元素的情况，那我们再讨论多元素的情况，而多元素分父子元素和兄弟元素这两种情况。

2.3 小技巧

2.3.1 自动居中

通过margin: 0 auto中的auto属性，可以快速实现元素居中。如下面这个例子，

  <div style="width:200px;
              height:200px;
              background:red;
              margin: 0 auto;"></div>

设置水平方向的auto，css会自动调整参数，让方块自动居中。

调整窗口也不会影响居中，不信你试试。

2.4 注意事项

2.4.1 内联元素无法使用上下外边距

我们给span设置向上和向左的外边距，效果如下，

  <span style="background: blue; 
               margin-top: 20px;
               margin-left:20px;">2222222</span>

可以看到向左的边距生效了，但是向上的边距并没有生效。

3 多元素·兄弟元素

而兄弟元素的情况下，两元素水平和元素垂直两种情况又不同，这里听我慢慢道来。

3.1 多元素·兄弟元素·垂直情况

首先准备两个元素，让两个元素水平

<div style="width:100px;
            height:100px;
            background:red;">
            </div>
<div style="width:100px;
            height:100px;
            background:black;">
            </div>

这种情况下，我们只能设置上下边距，这里分别给红方框设置100px的下边距，给黑方框设置100px的上边距。

<div style="width:100px;
            height:100px;
            background:red;
            margin-bottom:100px;">
            </div>
<div style="width:100px;
            height:100px;
            background:black;
            margin-top:100px;">
            </div>

我们可以看到，两方框边距并没有变成200px，而依旧是100px。

这是因为在垂直情况下，会对比两个边距，取其中最大的那个边距最为最终的边距。而这里两个边距都是100px，所以就取100px作为二者的边距。

我们再看看水平的情况，看看是否也依旧如此。

3.2 多元素·兄弟元素·水平情况

为了让两个元素水平对齐，我这里通过设置float属性实现，如果不懂float属性，也没关系，这并不会margin属性有什么影响，在这里只是为了水平对齐而已。

<div style="width:100px;
            height:100px;
            float:left;
            background:red;">
            </div>
<div style="width:100px;
            height:100px;
            float:left;
            background:black;">
            </div>

做完初步准备，让我们开始进行测试吧！

我们给红方框设置右边距100px，给黑方框设置左边距100px，看看最终效果。

<div style="width:100px;
            height:100px;
            float:left;
            background:red;
            margin-right:100px;">
            </div>
<div style="width:100px;
            height:100px;
            float:left;
            background:black;
            margin-left:100px;">
            </div>

由结果图可以看到，两个方框间距已经远远大于100px，其实际距离是200px，也就是说，在水平情况下，两者的边距，是两者设置边距的总和。

总结一下，兄弟元素在水平情况下，外边距等二者边距的总和；在垂直情况下，外边距等于二者中数值较大的边距。

看完兄弟元素后，我们看一下父子元素。

4 多元素·父子元素

父子元素的复杂之处就在于，父元素添加了padding属性之后，会和子元素margin同时发生作用，从而产生不一样的影响。

而我们也将会在下面讨论这些问题。

4.1 多元素·父子元素·简单情况

这里首先准备两个元素，一个400400px的蓝方块和一个5050px的红方块

  <div style="background: blue;
               width: 400px;
               height: 400px;">
    <div style="background: red;
               width: 50px;
               height: 50px;">
    </div>
  </div>

4.1.1 多元素·父子元素·简单情况·左下右边距

这时候为红方块增加左、下、右边距。

为什么不增加上边距？因为上边距有特殊情况，所以单独讨论。

  <div style="background: blue;
               width: 400px;
               height: 400px;">
    <div style="background: red;
               width: 50px;
               height: 50px;
               margin:0 50px 50px 50px;">
    </div>
  </div>

可以看到，红色子元素，就是以蓝色元素为边界，向左、右、下设置了外边距。

这样很容易理解，毕竟红色元素就在蓝色里面，对外设置的边距，就是距离蓝色边界的距离。

这个很简单，我们再看看为红色子元素设置向上的外边距，会有什么特殊情况发生？

4.1.2 多元素·父子元素·简单情况·上边距

这里我们讨论一下，为子元素设置上边距，会发生什么。

  <div style="background: blue;
               width: 400px;
               height: 400px;">
    <div style="background: red;
               width: 50px;
               height: 50px;
               margin:50px 50px 50px 50px;">
    </div>
  </div>

看到没有，是不是很神奇，明明是给子元素设置向上的边距，但是父元素竟然也有了向上的边距！

按照常理来说，给子元素设置向上的边距，明明只是子元素相对于父元素向下移动，但是在实际中，父子元素整体相对于浏览器向下移动了。

这是为什么？

实际上，是因为父元素没有设置padding和border值是，父元素上方与子元素上方就会同时受到一方设置的margin的影响。所以， 无论给父元素设置向上的外边距还是给子元素设置向上的外边距，都会导致二者同时向下移动。

对此完善的解决方案：
（1）给父元素添加overflow:hidden

  <div style="background: blue;
               width: 400px;
               height: 400px;
               overflow:hidden;">
    <div style="background: red;
               width: 50px;
               height: 50px;
               margin:50px 50px 50px 50px;">
    </div>
  </div>

（2）为父元素或者子元素添加float属性。

  <div style="background: blue;
               width: 400px;
               height: 400px;
               float:left;">
    <div style="background: red;
               width: 50px;
               height: 50px;
               margin:50px 50px 50px 50px;">
    </div>
  </div>

或者

  <div style="background: blue;
               width: 400px;
               height: 400px;">
    <div style="background: red;
               width: 50px;
               height: 50px;
               float:left;
               margin:50px 50px 50px 50px;">
    </div>
  </div>

（3）为父元素或者子元素添加position:absolute属性

  <div style="background: blue;
               width: 400px;
               height: 400px;">
    <div style="background: red;
               width: 50px;
               height: 50px;
               position:absolute;
               margin:50px 50px 50px 50px;">
    </div>
  </div>

或者

  <div style="background: blue;
               width: 400px;
               height: 400px;
               position:absolute;">
    <div style="background: red;
               width: 50px;
               height: 50px;
               margin:50px 50px 50px 50px;">
    </div>
  </div>

以上三种本质上是去除子元素margin穿透父元素，可以归类为BFC法。

也有的同学可能想，既然我不能给子元素添加向上的外边距，那我给父元素添加padding属性，给父元素添加内边距，是不是就可以实现我们的要求了？

而实际的结果是不行。结果如下图。

可以看到，虽然红色方框向下移动了，但是同时蓝色方框也拉长了50px，这是为什么？小伙伴们可以自己想想。

还有其他方法可以解决父子元素同时下移的问题，但是在这里不进行过多的赘述的，大家可以去研究一下。