Пространство, созданное пустыми абзацами с элементом br, занимает такое же пространство, как если бы у абзаца было содержимое (как и ожидалось).
Например: This div:
<div style="line-height: 1.3">
<p>One</p>
<p>Two</p>
<p><br></p> <!-- `br` here -->
<p>Four</p>
<p>Five</p>
</div>
имеет ту же высоту, что и эта:
<div style="line-height: 1.3">
<p>One</p>
<p>Two</p>
<p>Three</p>
<p>Four</p>
<p>Five</p>
</div>
Но если вместо элемента br я использую div с margin-top того же размера как line-height, пространство, создаваемое div, становится на один пиксель выше, чем его аналоги.
Этот div будет не быть такой же высоты как последние два:
<div style="line-height: 1.3">
<p>One</p>
<p>Two</p>
<div style="margin-top: 1.3em"></div>
<p>Four</p>
<p>Five</p>
</div>
(даже при использовании <div style="height: 1.3em"></div> будет иметь тот же дополнительный пиксель).
Чтобы сделать пространство div таким же, как и у других, я пришлось вычесть один пиксель из margin-top (или height), например:
<div style="line-height: 1.3">
<p>One</p>
<p>Two</p>
<div style="margin-top: calc(1.3em - 1px)"></div>
<p>Four</p>
<p>Five</p>
</div>
Мой вопрос : что вызывает этот дополнительный пиксель в высоте пространства создатель CSS?