In css, when inline element contains inline replaced element

Question

<div class="box">
  <span>
    <img src="https://picsum.photos/id/127/300/200" alt="" />
  <span/>
</div>

the img width is 300px and height is 200px

the img is a child element of span, i can't understand why the height of span is only 21px（not 200px or bigger than 200px）

---

i think i find the answer, thx everybody!

Specification

10.6.1 Inline, non-replaced elements

The height of the content area should be based on the font

Answer 1

You need to set image height and width and probably want span to display inline-block.

 span { display: inline-block; } img { width: auto; height: auto; }

 <div class="box"> <span> <img src="https://picsum.photos/id/127/300/200" alt="" /> <span/> </div>