Question

我在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 - 但它们之间有空格！这不是我想要的！戏剧拉马！

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

即为9，ff为11

欢呼声，安德鲁！

更新很多提到“p”标签 - 为什么/ p标签会影响什么？不是它被div包裹，并且div应用了背景颜色吗？事实上，div不应该内部更大，但相邻div之间没有空格？

更新：

所以我尝试了这个html：

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

没有解决问题，而且还有：

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

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

想法？

更新：很多回复要求我将填充设置为0.这不起作用。更多答案说明了这一点，我将投票给他们。

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

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

Answer 1

我尝试使用Chrome并看到了相同的行为。在查看基础CSS（F12）后，Chrome正在将以下两行应用于＆lt; p＆gt;标记：

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

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

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

希望有所帮助！

Answer 2

基本上P标签默认采用保证金。添加CSS

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

Answer 3

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

Firefox（和其他人）这样做与IE不同。您只需在css中执行p{margin: 0}即可“重置”此功能。

您只需在css中添加<{1}}即可同时对所有元素（我推荐）执行相同操作。

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

Answer 4

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

Answer 5

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

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

5 个答案: