inline 元素撑高问题
在 HTML 中，元素的类型会影响其布局行为。在内联元素中，文本可以撑起其父元素的高度，而图像却无法做到。要理解这一行为背后的原因，需要深入了解内联非替换元素。
内联元素与非替换元素
内联元素是行内元素，其宽度和高度由其内容决定。非替换元素是指没有固定宽高，而是根据其内容调整大小的元素。例如，段落 (<p>) 是内联元素，而图像 (<img>) 是内联替换元素。
高度计算
对于内联非替换元素，如段落，其高度是基于字号 (font-size) 计算的。即使段落本身没有内容，其高度仍然会根据其字号来设置。这是因为内联非替换元素不会占据空间，其高度仅由字体决定。
替换元素与高度
然而，图像作为替换元素，其高度是由图像本身的实际尺寸决定的。不管图像所在元素的字号如何，图像的实际高度都不会改变。这是因为替换元素会占据空间，其高度由其固有尺寸决定。
结论
因此，在给定的示例中，a 标签是一个行内非替换元素，这意味着其高度由其字号确定。由于文本是内联元素，它可以采用 a 标签的字号，从而撑起 a 标签的高度。另一方面，img 是内联替换元素，其高度由图像本身的尺寸决定，不受 a 标签字号的影响。
