background复合属性顺序_49 margin属性详解

成长是一辈子的事儿！大家好！我是时问新。分享前端、Python等技术，以及个人成长路上的那些事儿。

margin属性

margin是盒子的外边距，是盒子和其他盒子之间的距离。

margin也有四个方向。

以margin开头，接着跟一个小短横，然后跟表示方向的单词，就是margin的四个方向的小属性。

margin的塌陷

所谓的margin的塌陷，就是竖直方向的margin，有塌陷现象。

这个现象是：小的margin会塌陷到大的margin中，而margin不叠加，以大值为准。

比如下图：

上面的盒子，把下面的盒子向下"踹"了30像素，下面的盒子，把上面的盒子向上"踹"了40像素。而最终在页面上显示的时候，这两个盒子之间的距离是40像素，而并不是70像素。这就是margin的塌陷现象。

而margin在水平方向并不具有塌陷现象，是可以叠加的。

接下来，我创建一个叫"margin属性详解.html"的文件，在vscode和浏览器中进行演示。

    margin属性详解欲为诸佛龙象先做众生牛马    

我创建了两个span标签和两个div标签。

​

span标签是行内元素，可以并排显示，div标签是块级元素，不能并排显示。

关于行内元素和块级元素，后面会介绍。这里先知道就行。

两个span标签，我设置了左右方向的margin，两个div标签，我设置了竖直方向的margin。

在浏览器中，效果如下：

现在我在页面的span上右键点击"检查"，打开浏览器调试窗口，把鼠标滑到代码区域的span1上，用肉眼就能很明显的看到，页面渲染区域的span1和span2之间的水平方向距离，肯定是超过10像素的，也就是说在水平方向上，margin不塌陷，会叠加。它们之间的距离是10+20=30像素。

我把鼠标滑到box2上，就能看到box2和box1之间竖直方向的距离就是20像素，取的是20这个大值，而不是进行叠加。也就是说，在竖直方向上，是有margin塌陷现象的。

一些元素有默认的margin

一些元素，比如body、ul、p等标签，在我们什么样式都没有给它们设置的时候，浏览器就会给它们设置默认的margin，这些默认的margin，会影响我们开发精准的网页。

因此，在我们开始编写一个网页的时候，就要把这些具有默认margin的元素的默认margin清除掉。

如何清除呢？可以这样写：

这里的*号，是通配符选择器。通配符选择器表示选择页面上所有的元素。

同样的，一些元素也具有默认的padding，所以我们一开始，就把所有的元素的margin和padding都设为0。

但是通配符选择器有效率问题(并不是所有的元素都有默认的margin和padding，只是一部分)，所以我们使用并集选择器，把经常要用到的元素设置一下就行了。

关于一些元素具有默认的margin和padding，我在浏览器中演示一下。我还是在"margin属性详解.html"这个文件中，写一个ul，再写一个p。

    margin属性详解欲为诸佛龙象先做众生牛马    

他是平原跑出来的第一轮太阳 闭着眼都能感觉到阳光 我被燃烧过劲氧化发黄 枯燥风化 且时光还长

任何瞬间的心动都不容易，不要怠慢了它。

在浏览器中，效果如下：

我们看到，我在代码中只是新添加了一个ul，一个p，并没有给body、ul、p设置margin，span标签只设置了左右方向的margin，并没有设置上下方向的margin，但是在浏览器中，"欲为诸佛龙象先做众生牛马"所在的span和浏览器的窗口上边框之间是有一定的缝隙的。

由此，我们就能看出，body和浏览器上边框有一个向上的margin，我们并没有给body设置margin，那么就说明body具有默认的margin。

根据代码，第二个div，我们并没有设置下margin，但是ul和第二个div，以及下面的p之间，都有距离，这就说明ul和p标签都具有默认的margin。

我们还可以右键--检查，打开调试面板，把鼠标滑到代码区域，点击body，并把鼠标悬停到body上，会看到页面的显示区域，body默认就有上下左右方向的margin，

再看看body的盒子模型图，就能看到body上下左右四个方向，默认的margin是8像素，

同样的，我们点击代码中的ul，把鼠标悬停到ul上，会看到ul的盒子模型图上，显示ul默认具有上下方向的margin是16像素，左右方向margin为0，

ul的盒子模型图如下，

同样的，在代码区点击p，鼠标停在p上，就能看到p元素也有默认上下方向的margin，

p元素的盒子模型图上，上下方向margin为16像素，左右没有，如下：

一些元素具有默认的margin，也有默认的padding，我们都可以通过盒子模型图来看到。

现在，我们为了页面更精准，就要去掉这些元素默认的margin和padding，在css中加上去掉这些元素默认margin和padding的代码：

    margin属性详解欲为诸佛龙象先做众生牛马    

他是平原跑出来的第一轮太阳 闭着眼都能感觉到阳光 我被燃烧过劲氧化发黄 枯燥风化 且时光还长

任何瞬间的心动都不容易，不要怠慢了它。

现在，浏览器中效果就是这样：

我们看到，body和浏览器窗口之间、ul和第二个地之间，ul和最下面的p元素之间，都没有缝隙了，都是紧贴着的了。这就是去掉他们的默认margin的效果。

实际开发中，去掉元素默认margin和padding的代码，我们用交集选择器去写，不要用通配符去写，当然自己练习的话，怎么写无所谓。

盒子水平居中

一个盒子，默认是位于页面的最左边，或者位于父元素的最左边开会显示的，怎么样才能让盒子在水平方向上居中呢？

把盒子左右两边的margin设置为auto，盒子就在水平方向上居中了。

我们知道，padding写两个值的时候，第一个值表示上下方向，第二个值表示左右方向，同样的，margin也一样。

margin写两个值，第一个值写为0，就表示上下方向为0，第二个值写auto，auto就是自动的意思。左右方向自动，它自然就居中了。

因此，想要让任何一个盒子水平方向居中，就写margin：0 auto。

注意：文本水平居中是text-align：center，和盒子的水平居中不是一个概念。

盒子的垂直方向居中，需要使用绝对定位技术。绝对定位，后面我们会接触到。

感谢阅读！知识总结不易，请点个赞或转发鼓励一下呗！想系统性学习前端的小伙伴可以关注我！

温馨提示：我在头条关于前端的图文，都是成体系的，如果是没接触过前端，对前端感兴趣、想要学习前端的小伙伴，要按顺序从第一节去看，更重要的是要动手实践。