垂直堆叠的 div 之间有空间（firefox）答案

【问题标题】：vertically stacked divs have space between them (firefox)垂直堆叠的 div 之间有空间（firefox）
【发布时间】：2012-05-28 22:08:14
【问题描述】：

一个我在 SO 上找不到的小 css 问题 - 尽管我认为之前已经问过这个问题，但很抱歉。

所以，这里是html：

<html>
    <body style="color:white">
        <div class="a" style="width: 70%; background: blue;"><p>helloes helloes helloes</p></div>
        <div class="b" style="width: 70%; background: pink;"><p>talk talk talk</p></div>
        <div class="a" style="width: 70%; background: blue;"><p>yay! yay! yay!</p></div>
    </body>
</html>

可爱。

如果我在 ff 中打开它，我会得到三个垂直堆叠的 div - 但它们之间有空格！这不是我想要的！戏剧拉玛！

ie 按照我的预期呈现这个，这引起了一些警钟。

ie 是 9，ff 是 11

干杯，安德鲁！

更新了很多提到“p”标签-为什么/如何p标签影响任何东西？不是被div包裹了，而且div应用了背景色吗？实际上，不应该 div 只是内部更大，但相邻 div 之间没有空间？

更新：

所以我尝试了这个 html：

<html style="margin:0px; padding:0px;">

没有解决问题，还有这个：

<body style="color: white; margin:0px; padding:0px;">

这也没有解决问题 - 在这两种情况下，css不应该被“p”标签继承吗？有趣的是，我还用 firebug 检查了生成的 css，并且 p 标签的边距和填充都为 0...

想法？

更新：很多回复要求我将填充设置为 0。这不起作用。任何更多的答案说明这一点，我会投反对票。

更新：这个问题是关于使用内联 css 的。我自己实际上并不关心内联 css，但为什么每个人都为他们的答案提供 css 样式表？

更新：有人提到-webkit，虽然我根本没有使用谷歌浏览器，但这是一个有趣的想法。我看不到任何可能导致此问题的与 ff 相关的额外 css，有人有什么想法吗？

【问题讨论】：

尝试删除 div 之间的换行符。一些浏览器将换行符呈现为空格。我以前遇到过这个问题。
又是同一个问题，我看过很多次了，-1 并检查stackoverflow.com/questions/172918/…
@Bondye 一遍又一遍地问同样的问题，但你没有回答？轻松加分！耶！此外，您链接到的页面......这是相反的问题！实际上，这甚至不是同一个问题。
@dpk2442 - 中断已删除，问题仍然存在

标签： css internet-explorer firefox html

【解决方案1】：

我在 Chrome 上进行了尝试，并看到了相同的行为。在查看了底层 CSS (F12) 之后，Chrome 将以下两行应用于

标签：

-webkit-margin-before: 1em;
-webkit-margin-after: 1em;

如果我将以下内容添加到 css 中，空行就会消失：

-webkit-margin-before: 0px;
-webkit-margin-after: 0px;

希望有帮助！

【讨论】：

【解决方案2】：

基本上，默认情况下，P 标签会占用保证金。添加css

p{margin:0px; padding:0px;}

【讨论】：

【解决方案3】：

这是因为 <p> 元素的自动生成边距。

Firefox（和其他）与 IE 不同。您可以简单地通过在您的 CSS 中执行
p{margin: 0} 来“重置”它。

只需在 CSS 中添加
* { margin: 0; padding: 0;}，即可一次对所有元素执行相同操作（我建议这样做）。

小提示：安装浏览器扩展程序以检查 Firebug 等元素的行为。

【讨论】：

【解决方案4】：

您的<p> 标签有垂直边距。 CSS 中的垂直边距折叠，因此子边距有时可以应用于父级。见http://www.w3.org/TR/CSS21/box.html#collapsing-margins

【讨论】：

【解决方案5】：

我通过指定 CSS 'line-height' 解决了这个问题，我只是将它设置为与字体大小相同，然后在所有浏览器中获得一致的 DIV 间距。

【讨论】：