为什么图像上方存在差距？

Question

我想实现这个目标：

我已经实现了这个目标：

我不明白为什么按钮图像上方有间隙？该页面位于http://shrineweb.in/other-files/clients/omypet/tellerest/index.html

标记：

<section id="banner">
<nav> <a href="#"><img src="images/tellerest-homepage-design_09.png" alt=""></a><a href="#"><img src="images/tellerest-homepage-design_10.png" alt=""></a><a href="#"><img src="images/tellerest-homepage-design_11.png" alt=""></a><a href="#"><img src="images/tellerest-homepage-design_12.png" alt=""></a>
</nav>
</section>

CSS：

#banner { width: 950px; margin: 0 auto; text-align: center;}
#banner nav { margin: 0; padding: 0;}
#banner nav img { margin: 0; padding: 0;}

Answer 1

问题是由徽标图片创建的。图像是内联元素，因此它们后面有一个空白区域。要删除空白区域，可以通过添加此CSS来将图像显示为块元素：

header > img{
    display: block;
}

Answer 2

更改标题css并添加与此图像相同的高度

header { width: 950px; height: 56px; margin: 0 auto; text-align: left;}

Answer 3

有浮动问题请添加此代码

header img {
    display: block ;
}

Answer 4

您可以使用其中任何一种来阻止这种情况：

header img {display: block;}

header img {vertical-align:top;}

差距是由图片的默认vertical-align: baseline引起的，它将其与可能位于旁边的任何文字的基线对齐。