html - div之间的神秘边距

Question

我无法弄清楚为什么这里的蓝色和红色 div 之间有一个空格：

我已经把paddingand搞砸margin了一段时间，但似乎没有任何效果。

#header {
  background-color: green;
}

#title {
  background-color: blue;
  font-size: 80px;
  width: 100%;
  margin: 0px 0px 0px 0px;
  text-align: center;
}

#strip {
  background-color: red;
  font-size: 30px;
  width: 40%;
  margin: auto;
  text-align: center;
  display: flex;
}

.menu-button {
  margin: auto;
  text-align: center;
}

<div id="header">
  <div id="title">
    <p>Title</p>
  </div>
  <div id="strip">
    <div class="menu-button">
      <p>menu</p>
    </div>
    <div class="menu-button">
      <p>menu</p>
    </div>
    <div class="menu-button">
      <p>menu</p>
    </div>
    <div class="menu-button">
      <p>menu</p>
    </div>
  </div>
</div>

标签： htmlcss

Answer 1

您应该考虑在所有 css 的开头重置所有边距和填充，以避免像这样不需要的边距。

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}