为什么块级元素的行为如此？

时间：2015-12-19 10:19:25

标签： css

＆＃13;
＆＃13; 
.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;
}
＆＃13; 
<!-- 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>
＆＃13;
＆＃13;
＆＃13;

在上面的示例中，您会看到每个包装器中的两个直接子节点之间有一条白线。我在网上找到3个建议如何解决它不起作用（例如）也使用内联块元素（为什么???）。

我发现这不能清除它们之间的所有空间。

div {
  margin: 0;
  }

但使用星号（fetch all）可以清除它们之间的所有空格。

* {
  margin: 0;
  }

我知道：

  • 块级元素从新行开始
  • 如果未设置块元素宽度为100％

我不知道：

  • 为什么星号有效，而不是..
  • 为什么即使线条清晰也要在新线上开始

非常欢迎任何建议： - ）

1 个答案:

答案 0 :(得分：2)

使用*选择器是有效的，因为边距是由p元素引起的，该元素由该选择器捕获（但不是div）。

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

＆＃13;
＆＃13; 
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;
}
＆＃13; 
<!-- 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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题