CSS Inheritance of parent element?

Question

It looks like the text-indent for div is 0px ( which is the default body text-ident size), but why it is inheriting body element? why it is not inheriting P element who is the parent of div, setting text-indent to 32px?

p {
  text-indent: 32px;
}

div {
  text-indent: inherit;
}

<p>In my younger, he told me, ,
  <div>'just remember that all the people in this world haven't had the advantages thatyou've had.'</div>
</p>

@Pete I'm new to html, could you plz tell me why I can't put a div inside a p? — , May 23 '17 at 07:50
@slowjams This post will help you to understand **[Why putting div inside a p tag is invalid](https://stackoverflow.com/questions/10763780/putting-div-inside-p-is-adding-an-extra-p)**. — Abhishek Pandey, May 23 '17 at 08:01

Ehsan · Answer 1 · 2017-05-23T08:12:54.803

The text-indent property specifies the indentation of the first line in a text-block and no all lines.

read more : https://www.w3schools.com/cssref/pr_text_text-indent.asp

Syntactically, a div inside a p is invalid in all standards of HTML.

read More : Nesting block level elements inside the <p> tag... right or wrong?

you can use span instead of div.

Like this :

p {
  margin-left: 32px;
}

<p>In my younger, he told me,<br><br>
  <span>'just remember that all the people in this world haven't had the advantages thatyou've had.'</span>
</p>

If you want use div Insistence,use margin-left for indent.

p {
  text-indent: 32px;
}

div {
  margin-left: 32px;
}

<p>In my younger, he told me,
  <div>'just remember that all the people in this world haven't had the advantages thatyou've had.'</div>
</p>

score 1 · Answer 2 · answered May 23 '17 at 07:49

1

You cannot insert "div" tag inside "p" tag that is not valid in html. but you can insert "p" tag inside "div" tag. If you want the child element to inherit the "p" element property just change the "div" to "p".

answered May 23 '17 at 07:49

ram vinoth

472
4
14

@ram vinoth I'm new to html, could you plz tell me why I can't put a div inside a p? what rule am I breaking? thk – May 23 '17 at 07:56
just beacause "p" tag is line specifiation element, that cannot be used for content holding element like "div". If you are using div inside "p" the
tag will be closed automatiocally by
by browser and leaves the
as a sibling. in your case you "
" the browser is conveting the tags to "
". check https://www.w3.org/TR/html/grouping-content.html#the-p-element – ram vinoth May 23 '17 at 08:04

score 0 · Answer 3 · answered May 23 '17 at 07:54

Use <span> instead of <div>

You cannot insert <div> tag inside <p> that is not valid in html.

<p>In my younger, he told me, ,
  <span>'just remember that all the people in this world haven't had the advantages that you've had.'</span>
</p>

Hope this will help you

score 0 · Answer 4 · answered May 23 '17 at 07:56

Here is your answer as per your comment,

why I can't put a div inside a p?

Because <p> is a block level element, and it is used for displaying text, it won't allow any other block level elements inside it,

but you can use inline elements like <span> and <strong>

CSS Inheritance of parent element?

4 Answers4