顶部，右侧和左侧的CSS边距差距

为什么我的水平导航栏的顶部，右侧和左侧存在空隙？我不想要这些差距。我只想让导航栏从视口的0,0开始，这样就没有屏幕空间的浪费。顶部，右侧和左侧的CSS边距差距

HTML

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title></title> 
    <link href="StyleSheet.css" rel="stylesheet" type="text/css" /> 
</head> 
<body> 
     <ul id="nav"> 
      <li><a href="#">WORK</a></li> 
      <li><a href="#">BLOG</a></li> 
      <li><a href="#">ABOUT</a></li> 
      <li><a href="#">CONTACT</a></li> 
     </ul> 
</body> 
</html>

CSS

#nav { 
     list-style-type: none; 
     margin: 0 auto; 
     padding: 0; 
    } 

    #nav li { 
     width:25%; 
     float: left; 
     text-align: center; 
    } 

    #nav li a { 
     display: block; 
     padding: 0.5em 5px; 
     text-decoration: none; 
     font-weight: bold; 
     color: #F2F2F2; 
     -webkit-box-shadow: 3px 3px 3px rgba(51,51,51,0.3); 
     box-shadow: 3px 3px 3px rgba(51,51,51,0.3); 
    } 

    #nav a:link, #nav a:visited { 
     background-color: #071726; 
    } 

    #nav a:hover, #nav a:active, #nav a:focus { 
     background-color: #326773; 
    }

来源

2013-10-01 user2834739

像这样

demo

CSS

*{ 
    margin:0; 
    padding:0; 
}

来源

2013-10-01 12:12:37 falguni

没有，还是有向右侧，左侧和顶部的差距:-( – user2834739

@ user2834739这里寻找做了我不找你缺口写* {保证金：0;填充：0;}在样式表 – falguni

对不起，我没有看到选择器'*' – user2834739

默认情况下，文件/身体有余量。你可以通过设置下面的css规则来“禁用”它。

body, html{margin:0;padding:0}

来源

2013-10-01 12:14:01

谢谢，kasper。是填充需要吗？ – user2834739

@ user2834739填充不是必须在这里，看到我发布的答案 –

不，这是没有必要的但是每个人都包容我:-)。这是身体的差距给出了“差距”。 –

这里是reference

让它作为

body{ 
    margin:0px; 
}

来源

2013-10-01 12:14:25

它现在可以像魅力一样工作。:-) – user2834739

@ user2834739欢迎您来看看发布的JSBin。请标记为答案 –

你重置你的CSS？否则，使用（在你的CSS文件的顶部）

* { 
    padding: 0; 
    margin: 0; 
}

来源

2013-10-01 12:14:44 SKeurentjes

考虑使用复位/ CSS标准化： normalize， reset。

您还应该阅读this以更好地理解事物。

来源

2013-10-01 12:20:27 shem86

设置余量和/或填充到0在主导航元件或链接。。

nav li { 
    padding:0; 
    margin:0; 
}

来源

2013-10-01 12:55:01 Comms

顶部，右侧和左侧的CSS边距差距

回答

相关问题