HTML / CSS：4個像素的空間

Question

我想創建一個小網站，但我有一點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;
}