Question

这似乎是一个常见问题。我已经回顾了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的内容会影响父母边缘，但改变那些也没有做任何事情。很多帖子都说“使用重置文件！”我有点理解那是什么，但我想知道为什么它在随机应用之前有效。那么什么伏都教诅咒插入这个空间，我该如何打破它？

Answer 1

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

Answer 2

p标签有一个上边距和下边距，删除边距，空间就会消失。

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

2 个答案: