为什么我的图像下方有空间? [英] Why does my image have space underneath?

问题描述

即使应用了padding:0;margin:0，图像也会在下方获得一个神秘的空白空间.

(图片来自 WHATWG)

因此，即使没有文本，图像也会与基线对齐.幸运的是，修复非常简单:

img {vertical-align:bottom}

这会将图像与线的底部对齐，同时消除神秘空间.

请注意，如果您的图片很小(小于行高)，您可能会开始看到图片上方出现神秘空间.要解决此问题，请将 line-height:1px 添加到容器元素.

希望这能帮助我见过的很多人询问这个和类似的问题！

Images gain a mysterious empty space underneath, even if padding:0;margin:0 are applied.

Demonstration

The red border should hug the image, but there is space on the bottom side.

What causes this, and how can I remove this space?

解决方案

Images (and inline-block elements in general) are treated like a character.

As such, they obey the rule of the baseline.

In normal text, the baseline is the line across the bottom of most letters, such as in this sentence.

But some letters, such as p, q, j and so on, have tails that drop below the baseline. In order to prevent these tails from colliding with letters on the next line, space is reserved between the baseline and the bottom line.

This diagram illustrates the different lines used by text:

(Image from WHATWG)

So, the image is aligned to the baseline, even if there is no text. Fortunately, the fix is very simple:

img {vertical-align:bottom}

This will align the image to the bottom of the line, also removing the mystery space.

Just be careful, if your image is small (smaller than the line height), you may start seeing mystery space appearing above the image instead. To fix this, add line-height:1px to the container element.

Hopefully this helps the many people I've seen ask about this and similar problems!

这篇关于为什么我的图像下方有空间?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！