为什么元素的高度与其子元素的总高度不同

Question

当我尝试对元素的子元素的height求和时，结果与元素的实际高度不同，我不知道如何准确地计算总和。

var container = document.querySelector('.container');

var containerHeight = container.getBoundingClientRect().height;

var childrenTotalHeight = Array.from(container.children).reduce((acc, cur) => acc + cur.getBoundingClientRect().height, 0);

console.log({
  containerHeight, 
  childrenTotalHeight
});

<div class="container">
  <h1>hello</h1>
  <p>world</p>
</div>