为什么父母的offsetHeight会忽略其子边距，除非父母有边框？

Question

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

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

outer1.offsetHeight == 18

2）如果给内心的孩子margin，则父母的outerHeight不会改变：

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

outer2.offsetHeight == 18

3）如果父母被给予border，那么 将孩子的margin考虑在内：

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

outer3.offsetHeight == 30

我认为outerHeight测量其高度并包括其边界。为什么它包含孩子的保证金，但仅限于父母有边界？

Answer 1

只要父母没有边框，孩子的下边距可能是collapsed，下面有另一个元素。一旦定义了边界，就不可能。