“margin，我开始明白你的内心了。以前我看效果都是用肉眼来看，但是在我理解的那一刹那，我开始用更深的逻辑来理解页面展示，所有的元素排布真的可以看的深入原理般的清楚……原来你也有里层的绕指柔”
——题记，改编源自《大圣娶亲》
正文
在接触margin的时候，知道它是个外边距，用来距离其他元素的名词。当遇到margin没达到效果的时候，那就用padding，实现效果还不容易。可是，你就不想知道为什么没有出现想要的效果，这到底为啥？今天便来总结一番，一个一个来。
先上html，看下web结构：
html结构
好的，我们先来看margin为0的情况，正常，木有空隙：
图1.margin全为0
然后设置第一个p为margin-top:1rem情况：
图2.第一个p为margin-top: 1rem;
section为margin-top: 1rem的情况，也就是p的父容器：
图3.section为margin-top: 1rem;
有没有发现图2和图3是一样的，继续看section和第一个p的margin-top: 1rem的情况：
图4.section和第一个p为margin-top: 1rem
图2,3,4间距是一样的，继续看section为1rem，第一个p为2rem：
图5.section margin-top: 1rem；和第一个p为 margin-top: 2rem；
发现事实上显示结果是父容器与第一个子元素的margin-top值是最大的那个值，也就是例子的2rem。看第一二两个p的margin-top值为1rem：
图6.一二两个p“margin”为margin-top: 1rem;
并无特别，继续看第一个p的margin-top：1rem；margin-bottom：1rem：
图7.第一个p：margin上下值为1rem
设置第二个p的margin-top: 1rem
图8.第一个p为margin-top: 1rem; margin-bottom: 1rem; 第2个p为margin-top: 1rem;
发现第一个p的margin-bottom跟第二个p的margin-top合并成一个，改变第二个的margin-top值为2rem：
图9.第一个p为margin-top: 1rem; margin-bottom: 1rem; 第二个p为margin-top: 2rem;
发现事实上显示的是2rem，显示最大的那个值，咋说，我们可以发现：
图10.两个同级元素的外边距合并
图11.父元素与第一个子元素外边距合并
而如果其中有负值，则是两个margin值的相加，而不是取最大值。
【只有普通文档流中块框的垂直外边距才会发生合并，行内框、浮动框或绝对定位之间的外边距不会合并。】解决方法：利用padding来代替margin，或巧妙的利用margin值，或改为行内元素，或采用同一方向的margin，或浮动元素等
还有一点，margin若设为百分比值，相对的参照物是其父元素的宽度，这个不知道的话开发的时候可能会有坑，本文运行环境是chrome，以及不同浏览器的margin的坑是不一样的，这个网上的一篇文章写的还是可以参考的。
该篇文章主要说明垂直外边距的合并，可能在你遇到问题的时候印象会深些，不过本文还是一步步把它写出来，如果你在某个时刻看到，知道，诶，原来margin还有这样的一面，那这篇文章也就开心了~
网友评论