CSS：添加边框会改变背景颜色（？！）

Question

4

HTML:

<div> <p></p> </div>

CSS：

div { background-color:green; border-top:1px solid white; }
p { background-color:yellow; height:50px; margin:70px; }

演示： http://www.jsfiddle.net/Xy8QF/4/

为什么黄色段落上方的区域是绿色的，下方的区域是白色的？

顺便说一句，我已经弄清楚了，但我还是要发帖。把它当作一个谜语:)

更新：只是为了补充接受的答案：

- Šime Vidas

1

真是太奇怪了！ - Kyle

2

这就是当委员会指定约束求解问题时会发生的事情。 - Charlie Martin

哇，我已经为此苦恼了几个月！当h1的边距将整个网站的内容区向下推，从而在内容区和标题/菜单之间创建间隙时，这确实让我很烦恼... - mingos

4个回答

1

好问题。 :) 你可以通过给 div 添加底部边框来解决它，或者如果你不想这样做，可以将其高度设置为 100%。 ;-)

- GolezTrol

1

问题是“为什么会发生这种情况？”，而不是“我该如何更改这个？” - Quentin

0

这是因为<p>紧贴着包含的<div>底部。由于没有限制<div>的高度，渲染只给出足够的空间以适应到<p>的底部。任何显式高度>50px都将显示底部。

是的，在更新时完全正确。框在垂直方向上扩展，但不是水平方向上。此外，填充会在框的内部留下空间，因此p无法紧贴边界。

- Charlie Martin

1

完全一样。现在，由于div有底边框，因此顶部可以自由扩展。 - Charlie Martin

0

正如您所说，黄色段落上方的区域实际上并不在其上方。绿色div包含了黄色段落。黄色段落有70px的边距，使其远离容器的绿色边缘。黄色段落设置了高度，因此我们无法看到黄色段落从底部边缘向绿色段落推开。

- DigiKev

给段落设置高度并不是导致边距出现在段落顶部和 div 顶部之间而不是段落底部和 div 底部之间的原因。正如问题所指出的那样，这是因为边框，问题是“为什么？” - Quentin

我的答案并不是错误的。它回答了你的问题：“为什么黄色段落上面的区域是绿色的，下面的区域是白色的？” - DigiKev

1

但是高度为50像素，边距为70像素。即使我们将高度设置为仅5像素，仍然存在相同的问题：http://www.jsfiddle.net/Xy8QF/26/ - Šime Vidas

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- phihag · Accepted Answer

这是因为两个具有 position:static（默认值）的块级元素的边距会按照 CSS 2.1 8.3.1 中规定的方式合并，即边距“传递”到了 body 元素上。这个演示表明绝对定位的元素不会出现这种情况，这也是前面提到的标准中列举的一些例外情况之一（还有非none边框）。