为什么两个没有外边距的 div 之间会出现白色空隙？

Question

为什么两个没有外边距的 div 之间会出现白色空隙？

9

我简直不敢相信我会问这个问题，但显然周一早上并不顺利。为什么这两个div元素之间会出现空格？

<!DOCTYPE html>
<html>
<head>
 <title>Hello</title>
 <meta charset="UTF-8">
</head>
<body>
 <div style="margin:0;padding:0;min-height:200px;background-color:#c00;"></div>
 <div style="margin:0;padding:0;min-height:200px;background-color:#ccc;"><p>Hello</p></div>
</body>
</html>

jsFiddle示例

- user875293

<p>应用了哪些样式？ - J. Holmes

整个代码都添加了。我知道是p标签，但为什么？ - user875293

http://jsfiddle.net/njk96/ - Zoltan Toth

2

@ZoltanToth，这是因为您正在使用标准化的CSS（应用了默认情况下未开启的其他样式）。请参见没有标准化CSS。标准化CSS起作用的原因是因为它将p元素的margin设置为0，就像我在下面的回答中提到的那样。 - 0b10011

3个回答

0

你也可以尝试通过显式设置

元素的display属性为block和overflow属性为hidden，并将边距设置为0来解决这个问题。填充应该不重要。

- Mortz

-1

只是猜测，可能与最小高度和第一个 div 为空有关。要去掉它吗？

- tier1

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

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

- 0b10011 · Accepted Answer

这是由于折叠边距造成的。简而言之，p 元素的 margin-top 导致了 div 元素之间的空间。为了解决这个问题，你可以将 p 元素的 margin-top 设置为 0 (示例)。如果你仍然想在 p 元素中的文本上方留出空白，请将其 padding-top 设置为某个值 (示例)。或者，你也可以将 div 的 padding-top 设置为非 0 值，这样就会同时使用 div 的 padding-top 和 p 的 margin-top (示例)。一个小技巧来避免折叠边距和额外的顶部空间是将 padding-top 的值设置为计算结果为 0 的值 (示例)。

要了解更多信息，请参见 CSS3 规范的折叠边距部分。