如何去除页边距答案

【问题标题】：How to remove page margin如何去除页边距
【发布时间】：2011-06-16 07:07:21
【问题描述】：

页边距和导航栏之间的显示空间，如何删除这个空间

css代码

#topnav ul
{

    list-style-type:none;
    margin:0;
    padding:0;

    overflow:hidden;
}

#topnav li
{   

    float:left;
    display:inline;



}



#topnav a:link,
#topnav a:visited
{
    display:inline-block;
    width:110px;
    font-weight:bold;
    font-family:calibri;

    color:#FFFFFF;
    background-color:#98bf21;
    text-align:center;
    padding:3px;
    text-decoration:none;
    text-transform:uppercase;
}

#topnav a:hover,
#topnav a:active
{
    background-color:#7A991A;
}

html代码

<ul id="topnav">
    <li id="topnav"><a  href="#home">Home</a></li>
    <li id="topnav"><a  href="#news">OPD</a></li>
    <li id="topnav"><a  href="#news">IPD</a></li>
    <li id="topnav"><a  href="#news">Infrastucture</a></li>
    <li id="topnav"><a  href="#news">Gallery</a></li>
    <li id="topnav"><a  href="#news">Media</a></li>
    <li id="topnav"><a  href="#contact">Site Map</a></li>
    <li id="topnav"><a  href="#about">About</a></li>
    <li id="topnav"><a  href="#about">Nursing</a></li>
</ul>

【问题讨论】：

如果您提供JS Bin 演示来显示问题，我将能够为您解决。

标签： css navigation

【解决方案1】：

您需要在“body”元素上专门将边距和内边距设置为 0。

在你的 CSS 中试试这个：

body { margin: 0; padding: 0; }

【讨论】：

尝试使用 firebug、dragonfly 或类似工具来查看哪个元素有填充或边距。对于 Internet Explorer（我认为是某些版本），html 元素也可能有边距/填充。
是ul左边的边距吗？在这种情况下，可能是因为 li 的自动缩进。尝试摆弄 CSS 属性“list-style-position”。但实际上，JSfiddler 上的演示可以让我立即解决它。

【解决方案2】：

尝试添加

#topnav { font-size: 0; }
#topnav li { font-size: 12px; } /* or your font size that needed there */

【讨论】：