CSS的margin属性问题解析

CSS的margin属性

写在前面

更新了很多篇JavaScript和vue的文章啦，今天久违和大家分享以下css的知识点。也是我以前在第一次面试的时候被面试官问倒的问题，希望可以帮助到各位小伙伴。在css中有一个margin属性相信大家都比较的熟悉，但有一些细节还是需要和大家分享学习的。

属性的定义及使用

作用：首先不管是在IE盒模型下还是w3c标准盒模型下都是在盒子的最外层，作用就是和其他的盒子之间“顶开”出来，让盒子之间存在距离。如下图所示：

属性：这个不需要多讲，就是简单的上右下左
但是简写还是需要和大家简单说明一下的
margin:10px 5px 15px 20px;：
- 上边距是 10px
  右边距是 5px
  下边距是 15px
  左边距是 20px
margin:10px 5px 15px;
- 上边距是 10px
  右边距和左边距是 5px
  下边距是 15px
margin:10px 5px;
- 上边距和下边距是 10px
  右边距和左边距是 5px
margin:10px;
- 所有四个边距都是 10px

外边距塌陷

接下来讲讲重点就是外边距的塌陷问题

原因：外边距塌陷也称为外边距合并，是指两个在正常流中相邻（兄弟或父子关系）的块级元素的外边距，组合在一起变成单个外边距，不过只有上下外边距才会有塌陷，左右外边距不会出现这种问题。

例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <style>
        .a {
            float: left; 
            width: 100px;
            height: 100px;
            background-color: bisque;
        }
        .b {
            float: left;
            width: 50px;
            height: 50px;
            background-color: blue;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <div class="a">
        <div class="b">456</div>
    </div>
</body>
</html>

结果如图：

很明显我们想要的结果并不是这样的，我们想要的是蓝盒子的距离他的父盒子有20px的距离，而我们却发现父盒子也一起掉了下来，这就是我们常说的外边距塌陷问题。

解决这个问题的方法：

（1）给父盒子加上上边框，如果不想要看到边框可以把边框的像素设置成零也就是：

border:0px dash #fff

（2）给父盒子加上overflow:hidden让父盒子形成BFC也可以解决这个问题

<style>
        .a {
            width: 100px;
            height: 100px;
            background-color: bisque;
            overflow: hidden;
        }
        .b {
            width: 50px;
            height: 50px;
            background-color: blue;
            margin-top: 20px;
            
        }
    </style>

可以看到这就是我们想要的效果了

还有一种情况就是：当父子都有margin值的时候，以margin值大的为主

例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .a {
            width: 100px;
            height: 100px;
            background-color: bisque;
            margin-top: 50px;
        }
        .b {
            width: 50px;
            height: 50px;
            background-color: blue;
            margin-top: 100px;
            
        }
    </style>
</head>
<body>
    <div class="a">    
        <div class="b">456</div>
    </div>
</body>
</html>

此时的距离顶部的距离是100px，而不是50px

外边距重叠问题

上面讲的是父子盒子间的外边距问题，接下来讲讲兄弟盒子盒子间的重叠问题
在兄弟盒子之间的外边距上，垂直外边距会有问题但水平兄弟盒子不会有重叠问题
垂直兄弟盒子的计算方式是：

1.两个都是正数，取较大的值
2.两个都是负数，取绝对值较大的值
3.一正一负，取两个值得和

例如1：

<head>
    <style>
        .a {
            width: 100px;
            height: 100px;
            background-color: bisque;
            margin-bottom: 50px;
        }
        .b {
            width: 50px;
            height: 50px;
            background-color: blue;
            margin-top: 100px;
            
        }
    </style>
</head>
<body>
    <div class="a">    
       123
    </div>
    <div class="b">456</div>
</body>

可以看到它们之间的距离并不是我们预想中的150px而是100px

例如2：

.a {
            width: 100px;
            height: 100px;
            background-color: bisque;
            margin-bottom: 150px;
        }
        .b {
            width: 50px;
            height: 50px;
            background-color: blue;
            margin-top: -100px;
            
        }

可以看到它们之间的距离就成了50px

例子3：

    .a {
            float: left;
            width: 100px;
            height: 100px;
            background-color: bisque;
            margin-right: 150px;
        }
        .b {
            float: left;
            width: 50px;
            height: 50px;
            background-color: blue;
            margin-left: 50px;
            
        }

可以看到相邻的兄弟元素并不会受影响。

总结

在使用margin属性的时候要注意以下问题：

当为父子盒子时：子盒子在使用margin属性的时候会有外边距塌陷的情况，要使用overflow：hidden或者父元素加上边框解决。
当为兄弟组件的时：垂直兄弟组件会存在外边距重叠问题，要主要好它们之间的实际距离，解决办法可以是给其中一个设置想要的margin宽度即可；而相邻兄弟组件则不存在这种问题，可以放心的使用。