Question

在查看stackoverflow很长时间后，我找不到我的问题的答案，所以这就是我要求它的原因！

我的导航栏和主容器之间有一个奇怪的白色部分，我只需在栏下面输入就可以测试

这是我的代码：

body, html {
width: 100%;
height: 100%;
overflow: hidden;
}

body {
	background-color: gray;
}

#wrapper {
	
	margin: 32px 160px 0 160px;
	background-color: white;
	height: 90%;
	

}

#nav {
	background-color: #48D1CC;
	margin: 0;
	padding: 0;
}

#nav ul li {
	margin: -7px 4px 1px 0;
	background-color: #48D1CC;
	width: 19.5%;
	height: 42px;
	display: inline-block;
	text-decoration: none;
	text-align: center;
	color: black;
}

#nav a {
	line-height: 42px;
	font-family: arial, serif;
	font-size: 20px;
}

#nav ul li:hover {
	background-color: #40E0D0;
}

#right {
	margin: 0;
	width: 15%;
	height: 10px;
	color: black;

}

<!DOCTYPE HTML>

<html lang="en">
<head>

<meta charset="UTF-8"/>
<meta name="description" content="A test homepage"/>
<meta name="keyword" content="This is a few test key words"/>
<meta name="robots" content="index,follow"/>
<link rel="stylesheet" href="style.css"/>
<link rel="icon" href="favicon.ico"/>

</head>
<body>

<div id="wrapper">
  <div id="nav">
	<ul>
	<a href="index.html"><li>Home</li></a>
	<a href="index.html"><li>Help</li></a>
	<a href="index.html"><li>Contact</li></a>
	<a href="index.html"><li>Forum</li></a>
	<a href="index.html"><li>Info</li></a>
	</ul>
  </div>
  a
<noscript>Please enable JavaScript, you have it disabled</noscript>
</div>


</body>


</html>

我不确定为什么会这样，所以有一些帮助会很棒。

Answer 1

您的ul底部有16px

#nav ul {
  margin-bottom: 16px;
}

注意下次遇到类似问题时，请尝试使用Chrome开发工具（prssing f12）或FireBug分析具有意外行为的元素

Answer 2

您的<ul>标记默认添加了填充。通过添加：

覆盖它

ul{
    margin-bottom: -1px;
}

导航栏和正文之间的白条？

2 个答案: