Question

我不明白为什么这里的蓝色和红色 div 之间有一个空格：

我已经使用 padding 和 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>

Answer 1

body 和 p 有默认的边距值。

body {
    margin: 0;
}

#header {
    background-color: green;
}

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

#title>p {
    margin: 0;
}

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

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

.menu-button>p {
    margin: 0;
}

<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>

Answer 2

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

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

div 之间的神秘边距

2 个答案: