CSS，填充超出边距答案

【问题标题】：CSS, the padding is over the marginCSS，填充超出边距
【发布时间】：2015-08-27 08:07:24
【问题描述】：

所以，我不知道为什么，但是当我向 li 标签添加边距时，它不起作用！所以，li 超过了我在 .topo 类中给出的 10px 边距（请看 jsfiddle 中的示例！）

index.html

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <title>Início</title>
    <meta charset="UTF-8" />
    <link rel="stylesheet" type="text/css" href="css/estilo.css" />
</head>
<body>
    <section class="topo">
        <figure class="logo-topo">
            <img src="imagens/logo-icon.png" width="32px" height="32px"/>
        </figure>
        <nav class="navegador-topo">
            <ul class="lista-topo">
                <li class="ativo"><a href="#">HOME</a></li>
                <li><a href="#">HTML</a></li>
                <li><a href="#">CSS</a></li>
                <li><a href="#">JAVASCRIPT</a></li>
            </ul>
        </nav>
    </section>
</body>
</html>

estilo.css

@charset "utf-8";

*{
    margin:0px; 
    padding:0px; 
    font:100%;
}

.topo {
    background-color: #FF5050;
    padding-top: 10px;
    padding-bottom: 10px;
    box-sizing:border-box;
    position: relative;
}

.topo::after{
    content: "";
    clear:both;
    display: block;
}
.topo .logo-topo{
    float:left;
    margin:0px 10px 0px 10px;
}

.topo .navegador-topo{
    float:right;
    margin:5px 10px 0px 10px;
}

.topo .lista-topo{
    list-style: none;
}

.topo .lista-topo li{
    display:inline;
    font-size: 1.1rem;
    font-family: Verdana;
}

.topo .lista-topo li a{
    text-decoration: none;
    color:#FFF;
    border:1px solid #FFF;
    padding: 10px;
    transition:all 0.5s;
}

.topo .lista-topo li a:hover,.topo .lista-topo li a:focus{
    background-color:#FF7373;
}

我在 img 中添加了宽度和高度，只是为了向您展示图标的空间。

这是 jsfiddle 中的代码：http://jsfiddle.net/ecxraovk/ 谢谢！

【问题讨论】：

你能澄清一下“元素不“移动””的部分，你想完成什么？
您能澄清一下您在哪里添加新边距吗？
.topo 没有声明保证金。是的，请澄清。

标签： html css

【解决方案1】：

长话短说：您没有清除 ul ，而是在锚点上添加了额外的填充，导致它超出了 li 元素。填充没有超出边距...只是边距应用于小于 li 的 ul...它有点 DOM 的工作原理，因为您通过 a 从流中“删除”了它漂浮。我的建议是删除锚点上的边框和填充，然后将其添加到 li's，然后 clearfix UL's ...然后你的边距可以是 margin: 0 10px;如下所示：

    @charset "utf-8";
    * {
      margin: 0px;
      padding: 0px;
      font: 100%;
    }
    .topo {
      background-color: #FF5050;
      padding-top: 10px;
      padding-bottom: 10px;
      box-sizing: border-box;
      position: relative;
    }
    .topo::after {
      content: "";
      clear: both;
      display: block;
    }
    .topo .logo-topo {
      float: left;
      margin: 0px 10px 0px 10px;
    }
    .topo .navegador-topo {
      float: right;
      margin: 0 10px;
    }
    .topo .lista-topo {
      list-style: none;
    }
    .topo .lista-topo li {
      display: inline;
      font-size: 1.1rem;
      font-family: Verdana;
      border: 1px solid #FFF;
      padding: 10px;
      transition: all 0.5s;
      margin-left: 10px;
    }
    .topo .lista-topo li a {
      text-decoration: none;
      color: #FFF;
    }
    .topo .lista-topo li:hover,
    .topo .lista-topo li:focus {
      background-color: #FF7373;
    }

<section class="topo cf">
  <figure class="logo-topo">
    <img src="imagens/logo-icon.png" width="32px" height="32px" />
  </figure>
  <nav class="navegador-topo">
    <ul class="lista-topo topo">
      <li class="ativo"><a href="#">HOME</a>
      </li>
      <li><a href="#">HTML</a>
      </li>
      <li><a href="#">CSS</a>
      </li>
      <li><a href="#">JAVASCRIPT</a>
      </li>
    </ul>
  </nav>
</section>

a 与 li 不同，您看不到 li，因为您没有对其应用特殊样式

【讨论】：