Div之间的奇妙空间 - HTML / CSS

Question

为什么我的代码会在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，但我没有写任何边距或与箱子空格相关的东西。

Answer 1

好像你没有重置CSS，所以每个浏览器都可能以不同的方式呈现CSS。为避免这种情况，我建议在所有CSS文件之前使用 CSS reset file 。此文件会将不同浏览器可能应用的所有样式重置为一致的基线。

作为“热门修复”，您仍然可以执行此操作，但如上所述，使用CSS重置更为常见。

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

#menu > ul{
    margin: 0;
}

<强> Fiddle

Answer 2

我认为是p标签

p{margin: 0;}