CODEWITHSUNDEEP
htmlcss
Recovering Nerdaholic
Recovering Nerdaholic

Reputation: 707

Paragraph text CSS affected by child element?

Can someone please explain to me why the <div> somehow affects the CSS of the <p> that contains it?

<style>p { font-family: Arial }</style>
...
<p>some text</p>
<p><div></div>some text</p>
<p>some text</p>

In this example, the font in the second paragraph will change to the browser's default font. Why is this?

Upvotes: 2

Views: 239

Answers (2)

pschueller
pschueller

Reputation: 4427

By adding a div in your paragraph tag you are breaking your HTML. You will end up with something similar to:

<p>some text</p>
<p></p><div></div>some text<p></p>
<p>some text</p>

And so your font is not applied.

Paragraph tags may only contain phrasing-content. If you need to wrap text within your paragraph tags, consider using the <span> tag.

Upvotes: 3

Timmah
Timmah

Reputation: 1335

@Adrift is right, you can't nest block-level elements inside text tags. That's like saying 'there's an article inside this sentence', rather than 'there's a sentence inside this article'. This is because block level elements force a line break before and after themselves.

If you aren't using a CSS reset method, like a reset stylesheet or Normalize.css, the strange styling could be caused by the browser's user agent stylesheet (the default styles browsers use in the absence of anything else).

Upvotes: 1

Related Questions