Question

What does an empty p-element mean? Why is it rendered the way it is?

<p>Something...</p>
<p></p>
<p>Something else...</p>

<p></p>: Chrome will ignore it – yet it claims to be giving it a -webkit-margin-after:1em, yet it somehow overlaps the following paragraph’s text (see developer mode)

<p style='margin-top:2em'>: Chrome displays the top margin

<p style='font-size:2em'>: Chrome displays it, even though it is empty????

Answer 1

To quote from developer.mozilla.org/en-US/docs/CSS/margin_collapsing [Thanks to Llepwryd’s comment, it provides much needed info]

Empty blocks:
If there is no border, padding, inline content, height, or min-height to separate a block’s margin-top from its margin-bottom, then its top and bottom margins collapse.

So:

<p></p>: No content or height, top and bottom margin collapse into 1em. Developer mode shows 2em of margins, overlapping next paragraph’s text – I would guess this is a mistake?

<p style='margin-top:2em'>: ditto the above, except the margins collapse to 2em.

<p style='font-size:2em'>: some guesswork – the margins are 1em, where the margin’s em is equivalent to the font size of the paragraph, thus 1em of margin is equivlant to 2em of regular text. Now ditto the above, collapse the margins, and we have 2em of spacing between first and third paragraph.