Почему высота элемента отличается от общей высоты его дочерних элементов

#javascript

#javascript

Вопрос:

Когда я пытаюсь просуммировать 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>  

Комментарии:

1. Просто предположение: поля между дочерними элементами?

2. Это правильно, есть ли способ включить margin? Я не могу полагаться на стиль, потому что он может возвращать разные единицы измерения (px, rem, em …), и я не хочу иметь дело с уменьшением поля.