为什么我的内嵌图像标签下方有意外的空白？

图像标签下神秘的空白已解决

您最近修改了网站的标题图像，从 CSS 背景图像切换为内联图像图像元素。虽然图像现在按预期缩放，但您在其下方遇到了意外的 10 像素间隙。

使用 Chrome 的检查器但未能找出原因后，您向在线论坛寻求帮助。一种建议的解决方案基于印刷下行字母的概念。

下行字母是延伸到文本基线以下的字母，例如“j”、“g”、“p”和“y”。默认情况下，像图像这样的内联元素遵循基线对齐，这考虑了下行所需的空间。

解决方案：

• 设置垂直- align：bottom to the img tag: 这会将图像与容器的底部对齐，消除白色space.
• 将 display: inline 更改为 display: block: 这会将 img 标签转换为块级元素，删除其基线对齐方式。
• 调整容器的 line-height 属性： 将 line-height 设置为 0 可以消除间隙。
• 在容器上设置字体大小：0：这也消除了基线对齐，但可能需要恢复子元素上的字体大小。

以上是为什么我的内嵌图像标签下方有意外的空白？的详细内容。更多信息请关注PHP中文网其他相关文章！