7

我的页脚似乎有某种类型的虚构（页脚 div 顶部的不需要的填充...如果您需要我的意思的示例，请访问我的网站）填充它。如果您查看我的示例链接，您将看到我所指的内容。

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

如何删除此填充？

4

4 回答 4

1

摆脱顶部：82px；

 #footer {
 background-image:url(img/FooterBG.png);
 height: 92px;
 position: relative;
 z-index: 10;    
 padding: 0 35px;
 left: 0px;
 /* top: 82px; */
 }
于 2013-01-30T23:39:04.303 回答
0

@Herbert Peters 我不明白为什么会有那个假想的边界。但是，如果你删除

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

那么它就不存在了。

于 2013-04-05T12:46:02.870 回答
0

只需将边距/填充设置为 0 或负值（尝试 -1，然后增加直到消失）以获取所需方向

于 2013-04-11T16:54:13.300 回答
0

您可以尝试使用css 重置

您也可以尝试使用：

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

以防万一它是一个 Internet Explorer 问题。

于 2013-02-01T04:36:43.943 回答