为什么文字能撑开父元素高度，而图片却不行？

行内元素高度差异解析：文字撑高 vs 图片无力

在HTML中，文字和图片都可以作为行内元素嵌入到其他元素中。我们发现一个有趣的差异性：文字能够撑起其父元素的高度，而图片却不能。本文将探讨这一现象背后的原因。

文本元素与行高

行内非替换元素的父元素高度取决于其字体大小。例如，一个段落（

）元素的字体大小为16px，那么其内部文本的高度也将为16px。

图片元素与内联替换

图片元素是内联替换元素，这意味着它们会在其周围内容中创建一个“框”。当图片无法在规定的空间内完全显示时，它们不会撑开其父元素的高度。

规范说明

CSS规范中对行内非替换元素的内容高度有如下规定：

"对于行内非替换元素，其内容高度基于字体。如果元素的字体大小设置为0，则高度为0。"(https://www.w3.org/TR/2011/REC-CSS2-20110607/visudet.html#inline-non-replaced)

原因分析

这种设计的目的是为了确保文本内容的垂直对齐。如果图片也能撑开父元素高度，则可能导致文本和图片之间出现高度不一致，影响可读性。因此，图片作为内联替换元素，无法撑开其父元素的高度。

以上就是为什么文字能撑开父元素高度，而图片却不行？的详细内容，更多请关注硕下网其它相关文章！