may i ask a question about inline and block, i had tried but i found no answer to this

Question

<img> is inline-block elements( or likely)

when i add a <p> with "display:inline;" the paragraph and the image are on the same line( like below)

but when I use another <p> with "display:inline;" as a container for the earlier <p>, the paragraph act like a block element and push the <img> down although both the container and the child were inline.

Anyone knows why ?

this is my line of codes( it is just a test code so it doesn't have any use)

    <p style="display:inline;" ><p style="display:inline;">
    asdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasd
    </p></p>
    
    <img 
    src="https://www.thoughtco.com/thmb/4Bov5m2EOPlY5x6KwWNGgmefhhc=/768x0/
    filters:no_upscale():max_bytes(150000):strip_icc():format(webp)/
    LionelMessiBarcelona-5898d9fe3df78caebca7ac0d.jpg" alt="ronaldo">

Sorry i can't post the result, i dont have much reputation.

NOTE: This result doesn't happen if i replace the container or both of the container and child to <div> with "display:inline;" and it still doesn't happen if i replace them with other inline elements instead.

Answer 1

In this case, due to prohibition of nesting of <p>, the first <p style="display:inline"> will be "fixed" and closed immediately, and the second </p> will similarly be "fixed" by inserting an open tag; so the resulting DOM will be:

<p style="display:inline"></p>
<p style="display:inline">...</p>
<p></p>
<img>

The second <p> will not have any style applied, and thus will be displayed as a block. This will push down your image.