为什么内联元素中文字可以撑起高度，而图片却不能？

文字撑起内联元素高度，而图片无法撑起的缘由

在 HTML 中，文字和图片都可以作为内联元素包含在其他元素内。不过，当这些子元素与父元素同时为内联元素时，会出现一个有趣的现象：文字可以撑起父元素的高度，图片却不能。

要理解这种差异，我们需要了解行内非替换元素的概念。在这种情况下，父元素是一个行内非替换元素，即它的内容高度由字体大小决定。如果将字体大小设置为 0，那么元素的高度也会变成 0。

参考 CSS 规范：https://www.w3.org/TR/2011/REC-CSS2-20110607/visudet.html#inline-non-replaced

因此，当文字作为子元素时，它的字体大小将决定父元素的高度。但当图片作为子元素时，情况就不同了。图片不是替换元素，因此它们的实际高度将由图片内容本身决定，而不是父元素的字体大小。

故此，虽然文字和图片都是内联元素，但它们撑起父元素高度的能力却大不相同。这是因为父元素类型的差异，决定了子元素对高度的影响方式。

以上就是为什么内联元素中文字可以撑起高度，而图片却不能？的详细内容，更多请关注其它相关文章！