css - 子女的 margin 和 parent 的边界

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

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

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

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

最佳答案

您面临的问题称为利润率下降。


  父母和第一个/最后一个孩子
  如果没有边框，内边距，内联内容或间隙以将块的页边距顶部与其第一个子块的边距顶部分开，或者没有边框，内边距，内联内容，高度，最小高度或最大值-height将块的边距底部与最后一个子元素的边距底部分开，然后这些边距折叠。折叠的边距最终在父级之外。
  [来源MDN强调我的]


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


浮动父母
将父级显示属性更改为inline-block或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>

关于css - 子女的 margin 和 parent 的边界，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/35358568/