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

各位小伙伴们，大家好呀！看看今天我又给各位带来了什么文章？本文标题是《为什么内联元素中文字可以撑起高度，而图片却不能？》，很明显是关于文章的文章哈哈哈，其中内容主要会涉及到等等，如果能帮到你，觉得很不错的话，欢迎各位多多点评和分享！

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

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

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

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

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

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

今天关于《为什么内联元素中文字可以撑起高度，而图片却不能？》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！