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

问题描述

即使 padding：0; margin：0 已应用，图片也会在下方获得一个神秘的空白区域。

（图片来自< a href =http://www.whatwg.org/> 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, click for fullsize)

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屋！