CODEWITHSUNDEEP
htmlcss
Hanfei Sun
Hanfei Sun

Reputation: 47101

Put display:inline element inside nested display:block element doesn't work?

See this example:

http://jsfiddle.net/aLrfmyqm/

p {
    display: inline;
}
    
em {
    display:block;
}
<p> Outer inline <em>Block <p>Inner inline</p></em></p>

I expect the <p>Inner inline</p> to be inlined with Block, however, it starts in a new line. Does anyone have ideas about this? Thanks!

Upvotes: 6

Views: 1163

Answers (2)

sonam gupta
sonam gupta

Reputation: 785

There are two ways to do this:

  1. Convert the p element to div.

<div> Outer inline <em>Block <p>Inner inline</p></em></div>

  1. Or change the css of p to inline-block as:

    p { display: inline-block; }

view demo :https://jsfiddle.net/sonam185/sahfvhdd/
demo with div element : http://jsfiddle.net/sonam185/3c3cyv4z/

Upvotes: 0

Mr. Alien
Mr. Alien

Reputation: 157414

Your markup is invalid. You are not supposed to nest a p element inside p element and hence the issue.

From W3C :

The P element represents a paragraph. It cannot contain block-level elements (including P itself).

Check the source and you will get it why it behaves differently than what you expect it to be

enter image description here

Your browser will actually separate all the tags out and close the p elements for you.

So how we fix it? Use the <span> element instead of <p>

Demo

Upvotes: 14

Related Questions