logo标签列表

CSS margin是如何工作的？

htmlcss
28
在下面的代码中，.box1 和 .box2 之间的外边距应该是20px，因为 .box1 具有10px的底部外边距，而 .box2 具有10px的顶部外边距。
<div class="box">
    <div class="box1"></div>
    <div class="box2"></div>
</div>

CSS：

.box1{
    margin-bottom: 10px;
}

.box2{
    margin-top: 10px;
}

http://jsfiddle.net/3C7bW/

1
可能会有帮助：http://www.w3.org/TR/CSS2/box.html#collapsing-margins - Ron van der Heijden
1
阅读此链接，它很好地解释了边距的工作原理：http://reference.sitepoint.com/css/collapsingmargins - Pete
边距折叠，参见https://dev59.com/4HVD5IYBdhLWcg3wDXJ3。 - Jonathan
5个回答
26

不，两个盒子之间的边距只有10像素。

你说了两次同样的话，“在盒子1下必须有10像素的边距”和“在盒子2上必须有10像素的边距”。

可以这样想：

有两个人，Harry和Sally。Harry距离Sally有10英尺。 Sally离Harry有多远？是的，你答对了，是10英尺！

10
当你试图将这两个框水平对齐并说“box1右侧必须有10像素的边距”和“box2左侧必须有10像素的边距”时，这个示例就显得有些不够恰当了。你可以说Harry站在Sally上方10英尺处……但这听起来就像是一个小学数学问题。 - BoltClock
1
喜欢这些例子，很好地解释了这个问题。 - Jonathan
4
话虽如此，“折叠边距”这个概念基本上就是基于您刚刚解释的内容，不过它是基于段落之间的行间距来实现的，这就是为什么它只适用于垂直边距而不适用于水平边距的原因。 - BoltClock
"我要和她一样的东西！" ... 因为它们共享相同的边距。 - TheTurkey
不错的类比，+1 - Amal Murali
16

第一个框的下边距和第二个框的上边距被认为是相邻的; 因此，它们会 合并 成一个。

请注意，这仅适用于垂直边距; 无论情况如何，水平边距永远不会合并。如果您使两个框浮动，使它们水平对齐，并给.box1右边距和.box2左边距，则它们之间的总空间确实为20px。

事实上，即使您没有将它们水平对齐，而是使它们浮动并给它们清除，以使.box2清除.box1，底部和顶部边距也不再合并。 这两种情况在规范中也提到了。

5

您需要了解边距折叠。以下图片描述了边距折叠。

enter image description here

enter image description here

@meriton 想象一下 <div class="parent"><div class="child"></div></div> ，然后父元素设置 margin 为 30px，子元素设置 margin 为 20px，那么它就会发生折叠，只有 30px 的 margin。 - Bhojendra Rauniyar
@meriton 当然，内容区域应该向上移动，但这是我在演示图片时犯的错误。谢谢。已修改。 - Bhojendra Rauniyar
0
不，间距并不总是会折叠。你发布的链接也没有说什么时候发生折叠（甚至是否折叠——只是因为间距是透明的并不意味着它们重叠）。 - meriton
0
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接