2

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?

mgiuffrida
  • 3,299
  • 1
  • 26
  • 27

1 Answers1

3

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.

Stephen Thomas
  • 13,843
  • 2
  • 32
  • 53
  • still doesn't make any sense to me. Child's margin may be collapsed with some element below it, so what? why does the parent's height doesn't get affected by the margin of its child. And why is it affected when the parent has some border? could you please make some elaboration on this. thanks in advance. – Shahryar Saljoughi Apr 08 '21 at 11:21