Why does a parent's offsetHeight ignore its child's margin unless the parent has a border?

Question

1) In a simple parent-child relationship, the inner child generally affects the outerHeight of the parent:

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

outer1.offsetHeight == 18

2) If the inner child is given a margin, the parent's outerHeight doesn't change:

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

outer2.offsetHeight == 18

3) If the parent is then given a border, then it does take the child's margin into account:

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

outer3.offsetHeight == 30

I thought outerHeight measures its height up to and including its border. Why does it include the child's margin, but only if the parent has a border?

Answer 1

So long as the parent has no border, there is the possibility that the child's bottom margin might be collapsed with another element below it. Once the border is defined, that's not possible.