Html 放置在锚定标记中的图像上方的奇怪间距

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

---

如果您在firebug或Chrome Developer工具中检查图像上方的间距，

a

标记会增加大约17到20px的额外顶部空间。这很奇怪。有谁能提出为什么会有这样的间隔以及如何消除它

Hi现在定义此css并解决您的问题

.page-width{
position: relative;
}
#header-search {
    display: block;
    position: absolute;
    top: -47px;
    width: 25%;
    height: 40px;
    padding: 0;
    right: 0;
display: block;  // remove this line
position: relative; // remove this line
float: right;  // remove this line
}

是因为

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

你应该把它换成

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

并在

#标题搜索

@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;
}

---

移除<代码>浮动：无来自

.col1 layout.col main

css

.col1-layout .col-main {
    width: 100%;
    padding: 0;
    display: block;
}

并将css置于

。类别图像a

.category-image a {
    display: block;
    position:relative;
}

---

这是因为

.main container{padding:30px 30px 0；}

你应该用

来回复它。main container{padding:0 30px；}

谢谢@Maddy，这个问题可以通过调整firefox中的.main container padding来解决，但在chrome中似乎还是一样的？Maddy的建议是正确的。当de top padding为0时，空间消失。CONT+F5确保你的页面。虽然这个代码片段可以解决这个问题，但它确实有助于提高你文章的质量。请记住，您将在将来回答读者的问题，这些人可能不知道您的代码建议的原因。