HTML/CSS: 4像素空间

Question

我正在尝试使a little website，但我有一个小的css问题。如果你将鼠标悬停在照片底部的名字上，照片就会像应该的那样出现。但下面有4个像素的空间，我似乎无法删除它。我尝试过margin-bottom: -4px，但这让动画看起来很奇怪。

我想这是一件很简单的事情，但我就是找不到解决方案。有人能帮上忙吗？

Answer 1

试试vertical-align:bottom;

默认情况下，图像是inline-block元素。这基本上意味着它们被视为字符，但可以具有宽度和高度。

关于字符需要注意的是，它们有一个基线。大多数字母都与该基线对齐，但也有一些(如q，p，j，g)落在该基线以下。

因此，由于图像与基线对齐，因此在下面留下了一些额外的空间。vertical-align:bottom重写，强制图像与文本底部对齐。请注意，即使没有文本，这些对齐方式也适用。

Answer 2

将以下内容添加到css中：

.banner .photo img {
    display:block;
    padding:0px;
}