Place display: inline element inside nested display: block element not working?

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 <p>Inner inline</p> be embedded in Block , however it starts on a new line. Anyone have any ideas on this? Thanks!

Answer 1

Your markup is invalid. You should not insert the p element inside the p element and therefore the problem.

From W3C :

The P element is a paragraph. It cannot contain the level of a block of elements (including P itself).

Check the source, and you will receive it, because it behaves differently than you expect.

Your browser will really separate all tags and close p elements for you.

So how do we fix this? Use <span> instead of <p>

Demo

Answer 2

There are two ways to do this:

• Convert the p element to a div.

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

2. Or change css 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/