说说你对边距折叠的理解?

[问答题]

说说你对边距折叠的理解?

查看答案及解析

拯救世界的光太郎

语言的逻辑有点不通顺。

而且！没说到重点！

___________________________________________

关于边距融合，一句话就可以总结出来，在垂直方向，两个相遇的margin，之间只要没有border、padding（没错，就是padding，一会咱们就会讲一讲为什么还会有他）的阻隔，就可以发生融合。

___________________________________________

那你就可以大胆的发挥想象了，例如：

如果一个有margin属性，没有border没有padding的父元素，它里面放着一个带有margin属性的子元素，那怎么办？

融合呀！子元素的margin和父元素的margin融合到一起，谁的值大这个公共margin就表现为谁的大小。

那如果父元素有padding或者border呢？

两个margin都被分隔开了，自然就不会融合了。

附个🔗，看一下我上面举的例子，再看看这个图片例子，你就能理解地很生动了！

【CSS 外边距合并】https://www.jb51.net/w3school/css/css_margin_collapsing.htm

规则有3：

1. 两个 margin 都是正值的时候，取两者的最大值，作为两个 box 的公共 margin；

2. 当 margin 都是负值的时候，取的是其中绝对值较大的，然后，从0位置，负向位移，其实不论上下两个兄弟元素的负 margin，哪个绝对值更大，均是向上移动绝对值更大的距离；

3. 当有正有负的时候，将两个 margin 想加，和为0，则两个盒子刚好连接在一起；为正，中间的距离就是想加的值；为负，下方的盒子向上坍缩和的绝对值的高度

编辑于 2022-03-06 15:49:50 回复(0)

清蒸糖醋排骨

外边距折叠，指的是毗邻的两个或多个外边距 (margin) 会合并成一个外边距。

其中所说的 margin 毗邻，可以归结为以下两点：

这两个或多个外边距没有被非空内容、padding、border 或 clear 分隔开。
这些 margin 都处于普通流中。

两个或多个:说明其数量必须是大于一个，又说明，折叠是元素与元素间相互的行为，不存在 A 和 B 折叠，B 没有和 A 折叠的现象。

毗邻:是指没有被非空内容、padding、border 或 clear 分隔开，说明其位置关系。

注意:在没有被分隔开的情况下，一个元素的 margin-top 会和它普通流中的第一个子元素(非浮动元素等)的 margin-top 相邻；只有在一个元素的 height 是 "auto" 的情况下，它的 margin-bottom 才会和它普通流中的最后一个子元素(非浮动元素等)的 margin-bottom 相邻。

发表于 2018-11-27 19:47:10 回复(0)