css - 为什么除非父级有边框，否则父级的 offsetHeight 会忽略其子级的边距？

Question

1）在简单的父子关系中，内在的孩子一般会影响outerHeight父母的：

<div id="outer1">
  <div>hello</div>
</div>

outer1.offsetHeight == 18

2）如果给了内部孩子 a margin，父母的outerHeight不会改变：

<div id="outer2">
  <div style="margin-bottom: 10px">hello</div>
</div>

outer2.offsetHeight == 18

3）如果然后给父母 a border，那么它确实考虑了孩子的margin：

<div id="outer3" style="border: 1px solid black">
  <div style="margin-bottom: 10px">hello</div>
</div>

outer3.offsetHeight == 30

我想outerHeight测量它的高度，包括它的边界。为什么它包括孩子的边距，但前提是父母有边框？

Answer 1

只要父元素没有边框，子元素的下边距就有可能被其他元素折叠在其下方。一旦定义了边界，这是不可能的。