css float 在顶部获得双边距（不是来自 body）

Question

我是 css 的新手，我遇到了浮动元素的边距问题，它在顶部有 20 像素的边距，即使它的边距是 10 像素。我一直在研究几个主题，其中 body 默认边距似乎是问题所在，但事实并非如此。任何人都知道为什么会出现这种双重保证金？

我认为这是由于我的 div 容器在侧面，因为如果我将其上边距设置为 0，则浮动元素的上边距通常为 10px（而不是 20px）。我只是不明白 div 是如何影响浮动元素的。

ps: 我用的是 firefox

html:

<body>
<nav>
    <ul>
        <li> <a href="">Home</a> </li>
        <li> <a href="">Products</a> </li>
        <li> <a href="">Plan B</a> </li>
    </ul>
</nav>
<div class="content">
    <h2> Products</h2>
    <ul>
        <li><a href="">Product category</a></li><!--
      --><li><a href="">Product category</a></li><!--
      --><li><a href="">Product category</a></li><!--
       --><li><a href="">Product category</a></li><!--
       --><li><a href="">Productcategory</a></li><!--
--></ul>
    <p>hello there!
       etc..</p>
</div>
</body>

css:

body {
    font-size: 14px;
    padding: 0;
    margin: 0;
    border; 0;
}

/* -------------- SIDEBAR ---------------- */

nav ul {
    float: left;
    display: inline-block;
    width: 180px;
    border: 0;
    margin: 0;
    padding: 0;
}

nav ul li {
    background-color: red;
    margin: 10px;               /* HERE */
    padding: 10px;
    list-style-type: none;
    text-align: center;
}

nav ul li a {
    color:black;
    padding: 0;
    bordeR; 0;
    text-decoration: none;
}



/* --------------CONTENT AREA---------------- */
div.content {
    background-color: blue;
    margin: 10px 10px 10px 180px;   /* if top margin set to 0, it works */
    padding: 0;
    overflow: hidden;
}

div.content h2 {
    font-size: 120%;
    padding: 0;
    margin: 5px;
    float: left;
}

div.content ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    float: right;
}

div.content ul li {
    display: inline-block;
    margin: 0;
    padding: 0;
}


div.content ul li a {
    background-color: pink;
    text-decoration: none;
    padding: 5px;
    border-radius: 0;
    border: black;
    border-style: solid;
    border-width: 0;
}

div.content p {
    font-size: 110%;
    clear: both;
}

提前致谢！

Answer 1

你的所有利润都有保证金......这样做：

nav ul li:first-child {
    margin-top: 0;
}

当你使用 :first-child 时，你的第一个 li margin-top 是 0

css float 在顶部获得双边距（不是来自 body）

css float gets double margin on top (not from body)

html

css

double

margin