由于flexbox，元素位置更高

Question

我有两个相同的div，其中一个嵌套在一个额外的<div class="flexbox">中。在显示中，两个正方形都位于其同行段落之外，但第一个正方形与第二个正方形相比更高。 flexbox会产生什么影响？

＆＃13;

＆＃13;

p {
  margin-top: 1rem;
  line-height: 1.85rem;
}

.flexbox {
  display: flex;
}

.square {
  float: left;
  margin-top: 1rem;
  background-color: #cfc;
}

＆＃13;

<div class="flexbox">
  <div>
    <div id="first" class="square">A square</div>
    <p>A paragraph sits aside to the square.</p>
  </div>
</div>

<div>
  <div id="second" class="square">A square</div>
  <p>A paragraph sits aside to the square.</p>
</div>

＆＃13;

＆＃13;

＆＃13;

如果没有line-height和margin-top，Flexbox中的方块仍然更高，我想要拆除flexbox的副作用。

Answer 1

这似乎是保证金崩溃的问题。

来自MDN：

  

块的顶部和底部边距有时会合并（折叠）为单个边距，其大小是合并到其中的边距中的最大边距，这种行为称为边距折叠。

     

^{来源：https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing}

在非flexbox示例中，子div的margin-top和容器div的margin-top折叠为一个边距。这与块格式化上下文中父级和子级之间的边距折叠行为一致。

请注意，div元素通常默认为margin-top，由浏览器应用。在用户代理样式中的开发工具中查找。

您可以通过在容器上添加边框或填充来覆盖边距折叠行为：

＆＃13;

＆＃13;

.flexbox {
  display: flex;
}

#border {
  border: 1px dashed red;
}

#padding {
  padding: 5px;
}

.square {
  float: left;
  margin-top: 1rem;
  background-color: #cfc;
  border: 1px solid black;
}

p {
  margin-top: 1rem;
  line-height: 1.85rem;
}

＆＃13;

<div class="flexbox">
  <div>
    <div id="first" class="square">A square</div>
    <p>A paragraph sits aside to the square.</p>
  </div>
</div>

<div id="border">
  <div id="second" class="square">A square</div>
  <p>A paragraph sits aside to the square.</p>
</div>

<div id="padding">
  <div id="second" class="square">A square</div>
  <p>A paragraph sits aside to the square.</p>
</div>

＆＃13;

＆＃13;

＆＃13;

在 flex格式设置上下文中 ...

  

...弹性容器的边距不会随其内容的边距而崩溃。

     

^{来源：https://www.w3.org/TR/css-flexbox-1/#flex-containers}

因此，flexbox中没有边缘折叠。

Answer 2

因为您的div#first.square与其旁边的<p>的行高不同。

p {
  margin-top: 1rem;
  line-height: 1.85rem;
}

.flexbox {
  display: flex;
}

.square {
  float: left;
  margin-top: 1rem;
  line-height: 1.85rem;
  background-color: #cfc;
}

<div class="flexbox">
  <div>
    <div id="first" class="square">A square</div>
    <p>A paragraph sits aside to the square.</p>
  </div>
</div>

<div>
  <div id="second" class="square">A square</div>
  <p>A paragraph sits aside to the square.</p>
</div>

顺便说一下，你应该使用开发工具。它使调试很多其他事情变得更容易。