Question

我正在尝试在<nav class="navlist">周围创建10px边距空白区域。

我尝试添加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。

inline元素会忽略顶部和底部边距。

根据CSS Visual Formatting Model：

9.4.2内嵌格式设置上下文

在内联格式化上下文中，框是水平布局的，一个   在另一个之后，从包含块的顶部开始。   这些之间会考虑水平边距，边框和填充   框。

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

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

为什么我的<nav>元素忽略了保证金规则？

1 个答案: