4

一个我在 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;">

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

想法？

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

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

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

4

5 回答 5

4

我用 Chrome 试了一下，看到了同样的行为。查看底层 CSS (F12) 后，Chrome 将以下两行应用于 <p> 标签：

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

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

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

希望有帮助！

于 2012-05-22T12:08:58.127 回答
3

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

p{margin:0px; padding:0px;}
于 2012-05-22T12:11:04.777 回答
1

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

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


* { margin: 0; padding: 0;}您可以通过简单地添加您的 css来一次对所有元素执行相同的操作（我推荐） 。

小提示：安装一个浏览器扩展来检查你的元素的行为，比如 Firebug。

于 2012-05-22T12:09:28.267 回答
0

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

于 2014-03-26T20:24:52.543 回答
0

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

于 2012-05-22T17:15:10.260 回答