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

Question

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!

Answer 1

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

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