html - anchor 标记中放置的图像上方的间距奇怪

我在顶部菜单下方的页面顶部放置了一个大横幅，并在其上放置了一个链接。检查以下链接。

http://dev.shy7lo.com/shoes.html?___store=en&___from_store=arabic

如果您在Firebug或Chrome开发者工具中检查图像上方的间距，则a标记会增加大约17至20px的额外顶部空间。这很奇怪。任何人都可以建议为什么存在此间距以及如何消除它吗？

最佳答案

这是因为

 .main-container {
   padding: 30px 30px 0;
 }

您应该将其替换为

.main-container {
  padding: 0 30px;
}

并在height:0px中制作#header-search

@media only screen and (min-width: 771px)
#header-search {
    display: block;
    position: relative;
    top: -48px;
    float: right;
    width: 25%;
    /*height: 50px;*/
    height: 0;
    padding: 0;
}

关于html - anchor 标记中放置的图像上方的间距奇怪，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/32860170/