为什么我的图像有额外的间距？

Question

谁能告诉我是什么原因导致图像下面的空间？在div中似乎有额外的填充,红色边框与图像有关.我根本无法在萤火虫中找到这个间距.

百思不得其解.

Answer 1

默认情况下,图像将其底边与文本的基线对齐.你看到的那个空间是基线以下的空间,由q,p,y等下行器使用(事实上你没有文字是无关紧要的 - 它们的空间仍然是保留的.)

你可以像这样摆脱它:

img {  /* Or a suitable class, etc. */
    vertical-align: bottom;
}

Answer 2

它可能是垂直对齐 - 检查计算的样式以查看图像当前的样式，然后尝试将其添加到样式表中：

img { vertical-align: text-bottom; }

有关所发生情况的一些示例，请参阅图像下的神秘间隙和什么是垂直对齐。