为什么这些 div 之间有垂直空间？答案

【问题标题】：Why is there vertical space between these divs?为什么这些 div 之间有垂直空间？
【发布时间】：2012-08-08 23:57:14
【问题描述】：

这似乎是一个常见问题。我已经查看了 5 或 6 个其他 SO 问题，但似乎没有一个完全适合这种情况，也没有适合我的解决方案。我什至不确定我现在是否关心“如何解决它”作为“为什么会发生”。客气点，HTML 不是我的专长。

我有这个 HTML/CSS：

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            body {
                background: #336699;
            }

            .postContainer {
                margin-left: 40px;
                background: white;
                width: 555px; /* 480px + 75 for bg */
            }

            .postTop {
                background: red;
                height: 75px;
                padding-left: 80px;
            }

            .postMiddle {
                background: yellow;
                padding-left: 80px;
            }

            .postBottom {
                background: red;
                height: 75px;
                padding-left: 80px;
            }
        </style>
    </head>
    <body>
    <div class="postColumn">
        <div class="postContainer">
            <div class="postTop">
                <p>asdf</p>
            </div>
            <div class="postMiddle">
                <p>asdf</p>
            </div>
            <div class="postBottom">                
                <p>asdf</p>
            </div>
        </div>
    </div>
    </body>
</html>

我已经去掉了很多；目标是让博客文章的图像具有顶部、拉伸的中间部分和左下方的底部。所以顶部区域将有一小段文本，中间区域是任意数量，底部区域是一行文本。但是由于 div 之间有一些空间，所以图像没有对齐。

我在 Firebug 和 Chrome 的开发工具中检查了边距；两者都声称没有边距，也没有填充。我已经明确设置了边距，没有任何改变。有些问题建议更改行高；我试过了，它只是让文本变得不稳定而没有修复差距。我试过改变高度。一些帖子说 div 的内容会影响父级边距，但改变这些也没有做任何事情。很多帖子都说，“使用重置文件！”我有点理解那是什么，但我想在随机应用它之前知道它为什么会起作用。那么插入这个空格是什么巫毒诅咒，我该如何破解呢？

【问题讨论】：

没有发生：jsfiddle.net/dvEV6
@jlbfalcao 关闭规范化 css
@Musa：以前从未注意到该选项。我不确定我是否喜欢在这样的隐藏样式表中添加它...... :(

标签： html css

【解决方案1】：

在您的样式中添加p { margin: 0; padding: 0; } 或使用reset CSS file，这将阻止此类事情在未来发生并让您更好地控制您的样式。

【讨论】：

好的，我明白了。似乎开发工具应该告诉我容器 div 正在获得边距/填充。好混乱！
这只是一个浏览器的东西，他们给东西添加了自己的风格。就个人而言，我在我所做的每个项目中都使用重置 css 文件来避免此类事情。如果您使用 Firebug for Firefox 并将鼠标悬停在 <p> 元素上，您会看到边距正在影响 div。

【解决方案2】：

p 标签有上下边距，去掉边距，空间就会消失。

【讨论】：