html - 为什么我的 元素忽略边距规则？

Question

我正在尝试在我的 <nav class="navlist"> 周围创建 10 像素的边距空白区域.

我尝试添加 margin: 10px;和 margin-bottom: 10px;但是我的navlist粘在我的 <div id=header> 上.

我怎样才能将 navlist 周围的所有内容“推”开 10px？ , 所以我的 class=navlist 之间有空格和 id=header ？

这是我的 html 和 css:

.navlist {
  margin: 20px;
  padding: 20px;
  background-color: aqua;
  text-align: center;
  display: inline;
  border: 5px solid black;
}
#header {
  background-color: black;
  color: white;
  padding: 5px;
}
.fruitsoorten {
  line-height: 30px;
  background-color: #eeeeee;
  height: 300px;
  width: 100px;
  float: left;
  padding: 5px;
}
#section {
  width: 350px;
  float: left;
  padding: 10px;
}
#footer {
  background-color: black;
  color: white;
  clear: both;
  text-align: center;
  padding: 5px;
}

<nav class="navlist">
  <a class="links" href="index.html">Homepage</a>
  <a class="links" href="contact.html">Contact Us</a>
  <a class="links" href="about.html">about us</a>
</nav>

<div id="header">
  <p>City Gallery</p>
</div>

<div class="fruitsoorten">
  London
  <br>Paris
  <br>Tokyo
</div>

<div id="section">
  <h2>London</h2>
  <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 been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.</p>
</div>

<div id="footer">
  Copyright © W3Schools.com
</div>

Answer 1

您的nav 有display: inline。将其切换为 display: inline-block。

上边距和下边距被内联元素忽略。

根据CSS Visual Formatting Model :

9.4.2 Inline formatting contexts

In an inline formatting context, boxes are laid out horizontally, one after the other, beginning at the top of a containing block. Horizontal margins, borders, and padding are respected between these boxes.

水平边距受到尊重。垂直边距不是。

在 block formatting context 中水平和垂直边距均得到尊重。