Phrasing content with changed display property in CSS

Question

In the <button> specification part we see that permitted content is only Phrasing content. It's valid HTML code part (checked here):

<button>
    <span></span>
</button>

This is not valid HTML code part (checked here):

<button>
    <div></div>
</button>

Error: Element div not allowed as child of element button in this context. (Suppressing further errors from this subtree.)

But we can change display property of the <span>:

<button>
    <span style="display: block"></span>
</button>

And it looks like we use a <div> instead a <span>, but the HTML is valid. Is it OK (by the specification) to use a permitted content element and change its display property?

Answer 1

Even though you style a span with display: block you still can't put block-level elements inside it:

<div><p>correct</p></div>
<span style="display: block;"><p>wrong</p></span>

The (X)HTML still has to obey the (X)HTML DTD (whichever one you use), no matter how the CSS alters things.

So they are different, and thus there is nothing problematic here.