Question

我在html中创建了一个简单的导航栏，但nav的顶部和页面顶部之间有一个小空格。

HTML：

<div id="nav">
    <div id="menu">
      <ul>
        <li><a href="#">Home</a></li><li>
        <a href="#">About</a></li><li>
        <a href="#">Dowenload</a></li><li>
        <a href="#">Contact</a></li>
      </ul>
    </div>
</div>

的CSS：

body{
  margin:0px;
  background-color:green;
}
#menu ul{

}
#menu ul li{
  display: inline-block;
  list-style-type: none;
  font-size:20px;
  padding:15px;
}
#menu ul li a{
 text-decoration: none;
 color:#ccc;
}

Demo

我的问题是有人知道如何解决这个问题吗？

Answer 1

将margin: 0;添加到#menu ul

JSFiddle - DEMO

body{
    margin:0px;
    background-color:green;
}
#menu{
	width:100%;
	height:53px;
	background: -webkit-linear-gradient(#222, black); /* For Safari 5.1 to 6.0 */
  	background: -o-linear-gradient(#222, black); /* For Opera 11.1 to 12.0 */
  	background: -moz-linear-gradient(#222, black); /* For Firefox 3.6 to 15 */
  	background: linear-gradient(#222, black); /* Standard syntax */
}
#menu ul{
margin: 0;
}
#menu ul li{
	display: inline-block;
	list-style-type: none;
	font-size:20px;
	padding:15px;
}
#menu ul li a{
	text-decoration: none;
	color:#ccc;
}
#menu ul li:hover{
	background: -webkit-linear-gradient(#222, #1A1A1A); /* For Safari 5.1 to 6.0 */
  	background: -o-linear-gradient(#222, #1A1A1A); /* For Opera 11.1 to 12.0 */
  	background: -moz-linear-gradient(#222, #1A1A1A); /* For Firefox 3.6 to 15 */
  	background: linear-gradient(#222, #1A1A1A); /* Standard syntax */
}

	<title>test page</title>
<body>
	<div id="nav">
		<div id="menu">
		<ul>
			<li><a href="#">Home</a></li><li>
			<a href="#">About</a></li><li>
			<a href="#">Dowenload</a></li><li>
			<a href="#">Contact</a></li>
		</ul>
	</div>
	</div>
	<div id="content">
		
	</div>
	<div id="footer">
		
	</div>
	<script src="js/jquery.js"></script>
	<script src="js/start.js"></script>
</body>

Answer 2

#menu ul{
    margin-top: 0px;
}

请参阅：http://jsfiddle.net/gwytx6g4/2/

margin: 0px;也适用，如果您还想摆脱导航栏下方的边距。

您可以通过右键点击Google Chrome中的导航栏，然后点击＆＃34;检查元素＆＃34;来查看边距。确保在左侧看到的代码中突出显示#menu ul。

我最喜欢的CSS重置：

规范化：http://necolas.github.io/normalize.css/

Google＆＃34; CSS重置＆＃34;对于很多选择。

Answer 3

USE重置css或使用

  *{
   margin:0;
   padding:0;
  }

因为默认元素根据浏览器的不同有8px的边距空间，所以将它们重置为margin：0 填充：0

这是代码

http://jsfiddle.net/gwytx6g4/1/

为什么菜单和页面顶部之间有一个奇怪的空间？

3 个答案: