大数据

CSS | Hello, margin

“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还有这样的一面,那这篇文章也就开心了~