Why <p> nested in <span> leads for a block element?

Question

As <span> is an inline element and <p> is a block element I cannot understand how nesting a <p> element inside a <span> element will result with a block element. Here is my example:

div {
  background-color: cyan;
  border: solid;
}

p {
  border: solid;
}

<div>
  <span><p>STACK OVERFLOW</p> </span>
  <span><p>STACK OVERFLOW</p></span>
  <span><p>STACK OVERFLOW</p></span>
</div>

Answer 1

You simply cannot nest a p element inside a span element. The span element's content model should be phrasing content, which excludes elements such as p and heading elements. Since the span element's end tag is not omissible (i.e. it is required), the p element's start tag does not implicitly close the span element, so you get a validation error. However, browsers try to recover from the error, and they still render the p element as a block element.

To avoid this type of error in the future, I recommend validating HTML code using the W3C's HTML Validator and consulting the consulting the HTML5 specification (or a similar reference) about content models.