Question

我是css的新手，我有一个浮点元素的保证金问题，即使其保证金为10px，也会获得20px的保证金。我一直在研究几个主题，身体默认边缘似乎是问题所在，但事实并非如此。谁知道为什么这个双倍利润出现了？

我认为这是由于我的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在顶部获得双倍边距（不是来自正文）

1 个答案: