Q:

Why are font sizes of such anonymous block boxes not same

body {font-size: 40px;}
p {font-size: 12px;}
div, span {font-size: 20px;}
<h6>Why font size of before is inherited from p, while that of after is inherited from div</h6>
<p>before<div>content</div>after</p>
<hr>
<h6>This result is acceptable</h6>
<p>before<span>content</span>after</p>



See spec on Anonymous block boxes follow this link: http://www.w3.org/TR/CSS2/visuren.html#anonymous-block-level.

A:

The only valid content in a P element is phrasing content and a DIV isn't phrasing content. Your HTML is invalid and makes no sense for the browser, there's no reason the resulting content matches your expectations.
A span is a phrasing content, that's why the second part works according to your expectations.

