4

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

4

2 回答 2

6

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

于 2012-08-08T15:57:06.453 回答
2

标签有p顶部和底部边距，删除边距，空间就会消失。

于 2012-08-08T15:57:14.180 回答