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

6
votes

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!

2
htmlcss

2 Answers

14
votes

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

0
votes

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/