div 之间的奇怪空间 - HTML/CSS答案

【问题标题】：Wierd Space Between Divs - HTML/CSSdiv 之间的奇怪空间 - HTML/CSS
【发布时间】：2015-11-22 22:14:26
【问题描述】：

为什么我的代码会在 div 之间创建这种复杂的空格。

HTML：

<div id="container">
    <div id="header">       
        <p class="header_title">Theme Preview</p>
        <p class="header_quote">Previewing Another Blog</p>
    </div>
    <div id="menu">
        <ul>
            <li></li>
            <li></li>
        </ul>
    </div>
    <div class="post">
        <p class="post_title"></p>
        <hr />
        <p> <span class="post_date"></span> <span class="post_autor"></span> </p>
        <div class="post_content">      
        </div>
        <hr class="post_final" />
    </div>
    <div id="footer">
        <p>Design by</p>
    </div>
</div>

CSS：身体 { 宽度：100%；背景颜色：#C1C8D0；高度：自动； }

#container {
    margin:auto;
    max-width:1600px;
    width:100%;
    height:auto;
}

#header {
    background-color:#1B1C1E;
    width:100%;
    height:auto;
    text-align:center;
}

.header_title {
    padding-top:5%;
    color:white;
    font-family:Agency FB;
    font-size:5em;
    text-align:center;
}

.header_quote {
    color:#EBEBEB;
    font-family:Agency FB;
    font-size:1em;
    text-align:center;
    padding-bottom:5%;
}

#menu {
    background-color:white;
}

我已经查看了 CSS，但没有写任何边距或与 crate 空格相关的内容。

【问题讨论】：

标签： html css

【解决方案1】：

我认为是 p 标签

p{margin: 0;}

【讨论】：

这有点简洁。请说明您认为这是问题的原因。

【解决方案2】：

您似乎没有重置 CSS，因此每个浏览器可能会以不同的方式呈现 CSS。为避免这种情况，我建议使用 CSS reset file ，它需要包含在所有 CSS 文件之前。该文件将不同浏览器可能应用的所有样式重置为一致的基线。

作为“热修复”，您仍然可以这样做，但如前所述，使用 CSS 重置更为常见。

将margin: 0;添加到.header_quote并添加以下CSS规则

#menu > ul{
    margin: 0;
}

Fiddle

【讨论】：