html 中的填充没有消失

Question

这个例子是基于w3schools的。

我想将 "nav" 部分附加到 header。红色通知部分是问题。我不知道为什么 "nav" 没有附加到 header。我将填充应用为 0 px。谁知道如何解决问题？还是我误解了填充？谢谢你的回答。

我的 html 来源如下。

<!DOCTYPE html>
<html>
<head>
<style>
div.container {
    width: 100%;
    border: 1px solid gray;
}

header, footer {
    padding: 1em;
    color: white;
    background-color: black;
    clear: left;
    text-align: center;
}

nav {
    float: left;
    max-width: 160px;
    margin: 0;
    padding: 0em;
}

nav ul {
    list-style-type: none;
    padding: 0;
}

nav ul li {
    padding : 25px;
    border : 1px solid gray;
    background-color:orange;
}

nav ul a {
    text-decoration: none;
}

article {
    margin-left: 170px;
    border-left: 1px solid gray;
    padding: 0px;
    overflow: hidden;
}
</style>

</head>
<body>
  <div class="container">
  <header>
    <h1>City Gallery</h1>
  </header>

  <nav>
    <ul>
      <li><a href="#">London</a></li>
      <li><a href="#">Paris</a></li>
      <li><a href="#">Tokyo</a></li>
    </ul>
  </nav>

  <article>
    <h1>London</h1>
    <p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
    <p>Standing on the River Thames, London has beeon a major settlement for two millennia, it's history going back to its founding by the Romans, who named it Londinium.</p>
  </article>

  <footer>Copyright ? W3Schools.com</footer>

  </div>
</body>
</html>

Answer 1

您的导航是使用 ul 标签构建的，默认设置了 margin 属性

这应该可以解决您的问题：

nav ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

另外，请记住 0 不应与单位一起使用（这是一种很好的做法）

Answer 2

重置 ul 保证金。

nav ul {
   list-style-type: none;
   padding: 0;
   margin: 0;
}

Answer 3

设置 margin:0; 也会从页脚中删除 space。仅从 header 中删除 space 在 nav ul.

中设置 margin-top:0;

html 中的填充没有消失

padding is not disappearing in html

html

css

padding