CODEWITHSUNDEEP
html
Jeff
Jeff

Reputation: 978

Html: What exactly does an empty p-element mean (as far as rendering)?

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????

Upvotes: 1

Views: 389

Answers (3)

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201548

According to the HTML 4.01 specification, empty p elements should be ignored by browsers, and authors should not use them. So asking what browsers do with this is asking how they misbehave (fail to follow the recommendation) in processing constructs that should not be used. The experiments would need to be carried out separately for each browser and version.

Upvotes: 1

Jeff
Jeff

Reputation: 978

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.

Upvotes: 0

surendra
surendra

Reputation: 56

Tested in the chrome and other browsers. But there is no difference found. If there is no content in the

. the tag is not shown in any browser.

Upvotes: 0

Related Questions