/ 前端

margin外边距折叠傻傻搞不懂

margin之外边距折叠( Collapsing margins)

几乎在学习过前端的,多点少点总接触过有关于margin外边距折叠的情况.
如下:

See the Pen margin外边距折叠1 by elliot (@huangxutao) on CodePen.

很明显在css样式中`p`被声明为`margin: 40px;`然而上下两段文字之间的(外)间距并未像我们正常思维所想的那样为`80px`而是`40px`; 理由so easy, that is `Collapsing margins` 在作祟,那这是在W3C上css1标准中找到的相关概述 ![Alt text](/content/images/2015/11/2-1.png) >划红线处: >The width of the margin on non-floating block-level elements specifies the minimum distance to the edges of surrounding boxes. Two or more adjoining vertical margins (i.e., with no border, padding or content between them) are collapsed to use the maximum of the margin values. In most cases, after collapsing the vertical margins the result is visually more pleasing and closer to what the designer expects. > >译文: >外边距用来指定非浮动元素与其周围盒子边缘的最小距离。两个或两个以上的相邻的垂直外边距会被折叠并使用它们之间最大的那个外边距值。多数情况下,折叠垂直外边距可以在视觉上显得更美观,也更贴近设计师的预期。

根据以上概述我们可以知道

  • 发生折叠需要是相邻的非浮动元素
  • 折叠发生在垂直外边距上,即margin-top/margin-bottom
  • 折叠后取其中最大的那个margin值作为最终值

so,如果不想要这个Collapsing margins又该如何呢,当然是破坏它发生的条件,OK,再具体的就不多说毕竟这不是我想要说明的重点.


重点

先放栗子吧:如下
.box一个margin: 10px 0 0 0;的值,按照常理.box会相对于.layout一个10px的外边距,

See the Pen margin 傻傻搞不清 by elliot (@huangxutao) on CodePen.

- 然而, - 然而, - 然而 (重要的事情要说三遍)

明明应该给.box的外边距呈现出的结果却像是给.layout设置了margin: 10px 0 0 0;

真的想说
  • What are you 弄啥哩?
  • What are you 弄啥哩?
  • What are you 弄啥哩?(搞不清楚的事情也要说三遍)

一开始我遇到这个问题的时候,也没花多大时间,就解决这个带来布局问题(栗子中也有说明),当然在今天之前,只知决绝不知其理,

要说明的这就是 Collapsing margins在捣鬼,如下W3C中css2.1标准的概述

Alt text

划红线处:
In this specification, the expression collapsing margins means that adjoining margins (no padding or border areas separate them) of two or more boxes (which may be next to one another or nested) combine to form a single margin.

译文:
在此规范中,所有毗邻(同级或者嵌套的盒子元素,并且要求它们之间没有非空内容,以及没有padding或border分隔)的两个或多个盒子元素的margin值会合并为一个margin共享之。

简而言之呢就是,W3C在css2.1中又对css1中的margin 折叠描述得更为详尽了。(更为坑爹)

于是乎一切都明了 了


参考: