css - 为什么图像上方有间隙？

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

问题是由 Logo 图像造成的。图片是行内元素，所以它们后面有一个空白。要删除空白，您可以通过添加此 CSS 将图像显示为 block 元素:

header > img{
    display: block;
}