[英]In css, when inline element contains inline replaced element
<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 img 宽度为 300 像素,高度为 200 像素
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) img 是 span 的子元素,我不明白为什么 span 的高度只有 21px(不是 200px 或大于 200px)
i think i find the answer, thx everybody!我想我找到了答案,谢谢大家!
10.6.1 Inline, non-replaced elements
10.6.1 内联、非替换元素
The height of the content area should be based on the font
内容区域的高度应以字体为准
You need to set image height and width and probably want span to display inline-block.您需要设置图像的高度和宽度,并且可能希望 span 显示内联块。
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.