css - 为什么 block 级元素会这样？

Question

.wrapper.one {
  outline: 1px solid;
  font-size: 0;
}
.wrapper.one > div {
  /* select all div with direct parent .wrapper  */
  background-color: rgb(44, 204, 55);
  font-size: 20px;
}
.wrapper.two {
  outline: 1px solid;
}
.wrapper.two > div {
  /* select all div with direct parent .wrapper  */
  background-color: rgb(55, 44, 204);
  font-size: 20px;
}
.wrapper.three {
  outline: 1px solid;
}
.wrapper.three > div {
  /* select all div with direct parent .wrapper  */
  background-color: rgb(204, 44, 55);
  font-size: 20px;
}

<!-- change font size-stuff-->
<div class="wrapper one">
  <div>
    <p><a>A </a><b>B </b><code>C </code><del>D </del><em>E </em>
      <p><a>A </a><b>B </b><code>C </code><del>D </del><em>E </em>
        <p><a>A </a><b>B </b><code>C </code><del>D </del><em>E </em>
        </p>
  </div>
  <div>
    <p><a>A </a><b>B </b><code>C </code><del>D </del><em>E </em>
      <p><a>A </a><b>B </b><code>C </code><del>D </del><em>E </em>
        <p><a>A </a><b>B </b><code>C </code><del>D </del><em>E </em>
        </p>
  </div>
</div>

<!-- closeopen tag-stuff -->
<div class="wrapper two">
  <div>
    <p><a>A </a><b>B </b><code>C </code><del>D </del><em>E </em>
      <p><a>A </a><b>B </b><code>C </code><del>D </del><em>E </em>
        <p><a>A </a><b>B </b><code>C </code><del>D </del><em>E </em>
        </p>
  </div>
  <div>
    <p><a>A </a><b>B </b><code>C </code><del>D </del><em>E </em>
      <p><a>A </a><b>B </b><code>C </code><del>D </del><em>E </em>
        <p><a>A </a><b>B </b><code>C </code><del>D </del><em>E </em>
        </p>
  </div>
</div>

<!-- comment out-stuff -->
<div class="wrapper three">
  <div>
    <p><a>A </a><b>B </b><code>C </code><del>D </del><em>E </em>
      <p><a>A </a><b>B </b><code>C </code><del>D </del><em>E </em>
        <p><a>A </a><b>B </b><code>C </code><del>D </del><em>E </em>
        </p>
  </div><!--
  --><div>
    <p><a>A </a><b>B </b><code>C </code><del>D </del><em>E </em>
      <p><a>A </a><b>B </b><code>C </code><del>D </del><em>E </em>
        <p><a>A </a><b>B </b><code>C </code><del>D </del><em>E </em>
        </p>
  </div>
</div>

在上面的示例中，您看到每个包装器中的两个直接子级之间有一条白线。我在网上找到了 3 条如何修复它的建议(例如)以及使用内联 block 元素(为什么？？？)。

我发现这无法清除它们之间的所有空间。

div {
  margin: 0;
  }

但是使用星号(全部获取)将清除它们之间的所有空间。

* {
  margin: 0;
  }

我知道:

• block 级元素从换行符开始
• 如果未设置 block 元素宽度为 100%

我不知道:

• 为什么星号有效而 div 无效..
• 即使行很清楚，为什么要从新行开始

非常欢迎任何建议:-)

Answer 1

使用 * 选择器是有效的，因为边距是由 p 元素引起的，它被该选择器捕获(但不是 div ).

你可以使用 p { margin: 0; }，如下例所示。

p {
    margin: 0;
}
.wrapper.one {
  outline: 1px solid;
  font-size: 0;
}
.wrapper.one > div {
  /* select all div with direct parent .wrapper  */
  background-color: rgb(44, 204, 55);
  font-size: 20px;
}
.wrapper.two {
  outline: 1px solid;
}
.wrapper.two > div {
  /* select all div with direct parent .wrapper  */
  background-color: rgb(55, 44, 204);
  font-size: 20px;
}
.wrapper.three {
  outline: 1px solid;
}
.wrapper.three > div {
  /* select all div with direct parent .wrapper  */
  background-color: rgb(204, 44, 55);
  font-size: 20px;
}

<!-- change font size-stuff-->
<div class="wrapper one">
  <div>
    <p><a>A </a><b>B </b><code>C </code><del>D </del><em>E </em>
      <p><a>A </a><b>B </b><code>C </code><del>D </del><em>E </em>
        <p><a>A </a><b>B </b><code>C </code><del>D </del><em>E </em>
        </p>
  </div>
  <div>
    <p><a>A </a><b>B </b><code>C </code><del>D </del><em>E </em>
      <p><a>A </a><b>B </b><code>C </code><del>D </del><em>E </em>
        <p><a>A </a><b>B </b><code>C </code><del>D </del><em>E </em>
        </p>
  </div>
</div>

<!-- closeopen tag-stuff -->
<div class="wrapper two">
  <div>
    <p><a>A </a><b>B </b><code>C </code><del>D </del><em>E </em>
      <p><a>A </a><b>B </b><code>C </code><del>D </del><em>E </em>
        <p><a>A </a><b>B </b><code>C </code><del>D </del><em>E </em>
        </p>
  </div>
  <div>
    <p><a>A </a><b>B </b><code>C </code><del>D </del><em>E </em>
      <p><a>A </a><b>B </b><code>C </code><del>D </del><em>E </em>
        <p><a>A </a><b>B </b><code>C </code><del>D </del><em>E </em>
        </p>
  </div>
</div>

<!-- comment out-stuff -->
<div class="wrapper three">
  <div>
    <p><a>A </a><b>B </b><code>C </code><del>D </del><em>E </em>
      <p><a>A </a><b>B </b><code>C </code><del>D </del><em>E </em>
        <p><a>A </a><b>B </b><code>C </code><del>D </del><em>E </em>
        </p>
  </div><!--
  --><div>
    <p><a>A </a><b>B </b><code>C </code><del>D </del><em>E </em>
      <p><a>A </a><b>B </b><code>C </code><del>D </del><em>E </em>
        <p><a>A </a><b>B </b><code>C </code><del>D </del><em>E </em>
        </p>
  </div>
</div>