html - HTML/CSS：4 像素空间

Question

我正在尝试制作一个小网站，但我有一点 css 问题。如果您将鼠标悬停在照片底部的名称上，照片会按原样出现。但是下面有一个 4 像素的空间，我似乎无法删除。我试过margin-bottom: -4px了，但这让动画很奇怪。

我想这是一件简单的事情，但我无法解决这个问题。有人可以帮忙吗？

Answer 1

尝试vertical-align:bottom;

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

关于字符要注意的是它们有一个基线。大多数字母与此基线对齐，但有些字母（例如 q、p、j、g）低于它。

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

Answer 2

将以下内容添加到您的 CSS 中：

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