title: Putting a block level <span> element inside a <p> element
body: <p>I know that <code>&lt;p&gt;</code> is to be used specifically with inline elements. But what if you change an inline element like <code>&lt;span&gt;</code> into a block-level element using <code>{ display:block }</code> and contain it within a <code>&lt;p&gt;</code>?</p>
  
  <p>ie.</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;style&gt;
  
    p {
      background: red;
      height: 100px;
      width: 100px;
      }
  
    p span {
      display: block;
      background: blue;
      height: 50px;
      width: 50px;
      }
  
  &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
  &lt;p&gt;
    &lt;span&gt;I am a pizza&lt;/span&gt;
  &lt;/p&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Is that just wrong in every sense of the word? I know it is not common (ie. most would question why I didn't just use a div) but it's a hypothetical situation. It passes validation tests, but is it sloppy as all heck/bad practice? Would you scoff if you read that code?</p>