为什么我的图像与其包含的盒子之间存在差距？

当我的浏览器呈现以下测试用例时,图像下方有一个间隙.根据我对CSS的理解,蓝色框的底部应该触摸红色框的底部.但事实并非如此.为什么？

Jim.. 19

内联元素垂直对齐基线,而不是包含框的最底部.这是因为文本下方需要少量空间用于下行 - 字母上的尾部如小写"p".因此,在底部上方有一条短距离的假想线,称为基线,默认情况下内联元素与其垂直对齐.

有两种方法可以解决这个问题.您可以指定图像应垂直对齐到底部,也可以将其设置为块元素,在这种情况下,它不再被视为文本的一部分.

除此之外,Internet Explorer还有一个HTML解析错误,它不会忽略关闭元素后的尾随空格,因此如果您遇到Internet Explorer兼容性问题,可能需要删除此空格.

内联元素垂直对齐基线,而不是包含框的最底部.这是因为文本下方需要少量空间用于下行 - 字母上的尾部如小写"p".因此,在底部上方有一条短距离的假想线,称为基线,默认情况下内联元素与其垂直对齐.

有两种方法可以解决这个问题.您可以指定图像应垂直对齐到底部,也可以将其设置为块元素,在这种情况下,它不再被视为文本的一部分.

除此之外,Internet Explorer还有一个HTML解析错误,它不会忽略关闭元素后的尾随空格,因此如果您遇到Internet Explorer兼容性问题,可能需要删除此空格.