关于父母的孩子和边界的保证金

Question

我有一个带有儿童div的盒子。孩子有保证金。如果我在父级（div.box）上设置边框，则元素的高度会发生变化，如下图所示。诀窍在哪里？

＆＃13;

＆＃13;

.box {
  background: #0F3;
  border: 1px solid #000;
}
.box-border {
  background: #0F3;
}
.text {
  margin: 40px;
}

＆＃13;

<div class="box">
  <div class="text">Content</div>
</div>

<div class="box-border">
  <div class="text">Content</div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您面临的问题称为折叠边距。

  

父母和第一个/最后一个孩子
  如果无边框，填充，内联内容或间隙将块的边距顶部与其第一个子块的边距顶部分开，或者没有边框，填充，内联内容，高度，min-height或max-height将块的边距底部与其最后一个子节点的边距底部分开，然后这些边距会崩溃。 折叠的保证金最终在父母之外   [来源MDN强调我的]

如果您想要阻止没有边框的元素上的折叠边距，您可以在此处查看其他方式：How to disable margin-collapsing?。

• 浮动父级
• 将父显示属性更改为内联块或position:absolute;
• 将父级的溢出设置为hidden
• ...

带有overflow:hidden;的

示例：

.box {
  background: #0F3;
  border: 1px solid #000;
}
.box-border {
  background: #0F3;
  overflow:hidden;
}
.text {
  margin: 40px;
}

<div class="box">
  <div class="text">Content</div>
</div>

<div class="box-border">
  <div class="text">Content</div>
</div>