Question

我的页脚似乎有某种类型的虚构（页脚顶部的不需要的填充...如果你需要一个我的意思的例子，只需访问我的网站）填充它。如果你查看我的样本link，你会看到我指的是什么。

<div id="footer">

<div id="Social">

<img src="img/Follow.png" width="339" height="21" alt="Follow on Social" style="position: relative; display:block;" />

<ul>
<li class="Twitter"><a href="#" target="_blank">Twitter</a></li>
<li class="Facebook"><a href="#" target="_blank">Facebook</a></li>
<li class="Youtube"><a href="#" target="_blank">Youtube</a></li>
<li class="Linkdin"><a href="#" target="_blank">Linkdin</a></li>
</ul> 

</div> <!-- Social -->

<div style="clear:both"></div>
</div> <!-- footer -->

My CSS:

#footer {
background-image:url(img/FooterBG.png);
height: 92px;
position: relative;
z-index: 10;    
padding: 0 35px;
left: 0px;
top: 82px;
}


#Social {
float: left;
width: 339px;
}


/* Social Links */

.Twitter a {
background-image: url(http://www.nerissagrigsby.com/wp-content/themes/twentytwelve/img/Twitter.png);
overflow: hidden;
text-indent: -999px;
display: block;
width: 42px;
height: 27px;
}


.Twitter a:hover {
background-position-y: 27px;

}

.Facebook a {
background-image: url(http://www.nerissagrigsby.com/wp-content/themes/twentytwelve/img/Facebook.png);
overflow: hidden;
text-indent: -999px;
display: block;
width: 18px;
height: 31px;
 }

 .Facebook a:hover {
background-position-y: 31px;
 }


 .Youtube a {
background-image: url(http://www.nerissagrigsby.com/wp-content/themes/twentytwelve/img/YouTube.png);
overflow: hidden;
text-indent: -999px;
display: block;
width: 29px;
height: 30px;
 }

 .Youtube a:hover {
background-position-y: 30px;
 }

 .Linkdin a {
background-image: url(http://www.nerissagrigsby.com/wp- content/themes/twentytwelve/img/LinkedIn.png);
overflow: hidden;
text-indent: -999px;
display: block;
width: 28px;
height: 29px;
}

.Linkdin a:hover {
background-position-y: 29px;    
}

#Social ul li {
display: inline-block;
margin-right: 24px; 
}

#Social ul {
margin: 12px 0 0 0;
padding: 0;
}

如何删除此填充？

Answer 1

摆脱顶部：82px;

 #footer {
 background-image:url(img/FooterBG.png);
 height: 92px;
 position: relative;
 z-index: 10;    
 padding: 0 35px;
 left: 0px;
 /* top: 82px; */
 }

Answer 2

您可以尝试使用css reset

您也可以尝试使用：

<meta http-equiv="X-UA-Compatible" content="IE=edge">

以防这是一个互联网资源管理器问题。

Answer 3

@Herbert Peters我不明白虚构边界存在的原因。但是，如果你删除

 <div style="clear:both"></div>

然后不在那里。

Answer 4

只需将margin / padding设置为0或负值（尝试-1然后增加直到它消失）为想要的方向

无法删除页脚中的填充

4 个答案: