垂直堆叠divs之间有空间（火狐）

一个小小的CSS问题，我不能完全找到所以 - 虽然我认为它已被问过，道歉。垂直堆叠divs之间有空间（火狐）

所以，这里是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只是内部更大，但相邻divs之间没有空间？

UPDATE：

所以我想这个网站，而不是：

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

这并没有解决问题，也这样：

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

也未解决问题 - 在两种情况下，css都不应该被“p”标签继承？有趣的是，我还检查了与萤火虫生成的CSS，和P标签都有余量和填充0 ...

的想法？

更新：很多答复要求我将填充设置为0.这不起作用。任何更多的答案说，我会投票'时间。

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

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

来源

2012-05-22 bharal

尝试删除div之间的换行符。某些浏览器将换行符作为空格。我以前遇到过这个问题。 – dpk2442

又一个相同的问题，我见过这很多时间，-1和检查http://stackoverflow.com/questions/172918/div-100-height-works-on-firefox-but-not-in-ie什么事 –

@Bondye一次又一次的同样的问题，但没有回答你？简单点！好极了！此外，您链接到的页面...这是相反的问题！实际上，这甚至不是同一个问题。 – bharal

我用Chrome试过了，看到了相同的行为。看着下面的CSS（F12）后，Chrome是以下两行申请的<p>标签：

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

如果我添加以下的CSS空行消失：

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

希望有所帮助！

来源

2012-05-22 12:08:58 JerseyMike

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

Firefox（和其他）与IE不同。只需在您的css中执行
p{margin: 0}即可“重设”。

您可以一次对所有元素执行相同操作（我推荐），只需在您的css中添加
* { margin: 0; padding: 0;}即可。

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

来源

2012-05-22 12:09:28 TwisterStudios

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

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

来源

2012-05-22 12:11:04

您的<p>标签有垂直边距。 CSS中的垂直边距合拢，因此子边缘有时适用于父母。请参阅http://www.w3.org/TR/CSS21/box.html#collapsing-margins

来源

2012-05-22 17:15:10

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

来源

2014-03-26 20:24:52 rethenhouser2

垂直堆叠divs之间有空间（火狐）

回答

相关问题