DIV text formatting inconsistency

Question

I've stumbled upon <div> behavior I've never noticed.

<div> doesn't inherit text formatting styles from the <p> tag. Only from the <p> tag. Even when using class selector.

https://codepen.io/elaman/pen/JjjRvWB

Is there any documented explanation to this?

https://stackoverflow.com/questions/8397852/why-cant-the-p-tag-contain-a-div-tag-inside-it — Morpheus, Oct 18 '19 at 05:24

score 0 · Answer 1 · answered Oct 18 '19 at 05:30

0

Use this CSS

p, a, section, .test ,div{
  text-decoration: underline;
  font-weight: bold;
  color: blue;
  font-size: 12px;
}

answered Oct 18 '19 at 05:30

Nachiket Patel

21
2

score 0 · Answer 2 · answered Oct 18 '19 at 05:39

Nesting div tags within p tags is invalid in HTML. If you open this in the browser and click inspect elements you'll see that the browser is creating 2 p tags on either side of the div and it is no longer nested. So the div cannot inherit anything from a p tag.

score 0 · Answer 3 · answered Oct 18 '19 at 05:45

0

As per W3 validation, this is not a valid p tag not contain div element. so check in inspect or view page source div tag is outside of p automatically that's why p tag style did not apply on div tag.

answered Oct 18 '19 at 05:45

Keyur Gajjar

350
2
7

DIV text formatting inconsistency

3 Answers3