Question

正如标题所述，我很难摆脱导航栏和标题之间的空间（天空图像）。我认为解决方案有一个将nav css（或ul）边距设置为auto或0，但我仍然相对较新的css和html。 http://jsfiddle.net/Karmatix/ynf5xfts/4/

＆＃13;

body {
	background-color: #6f8285;
}

#wrapper {
	width: 1280px;
	margin: 0px auto;
}

img {
	width: 1280px;
	height: 150px;
}


nav {
	background-color: black;
}

nav ul {
	list-style-type: none;
}

nav ul li {
	display: inline;
	font-size: 30px;
	padding: 100px;
}

a {
	text-decoration: none;
	color: red;
}

a:hover {
	color: #6f6f6f;
}

＆＃13;

<!doctype html>
<html>
<head>
	<title>Karmatix</title>
	<link rel="stylesheet" type="text/css" href="karmatix.css">
	<script src="karmatix.js"></script>
</head>
<body>
	<div id="wrapper">
		<img src="http://upload.wikimedia.org/wikipedia/commons/3/39/Cloud_banner.jpg">
		<nav>
			<ul>
				<li><a href="https://www.google.com/">Test 1</a></li>
				<li><a href="https://www.google.com/">Test 2</a></li>
				<li><a href="https://www.google.com/">Test 3</a></li>
				<li><a href="https://www.google.com/">Test 4</a></li>
			</ul>
		</nav>
	</div>
</body>
</html>

＆＃13;

Answer 1

添加此样式：

img { vertical-align: middle; /* added */ }
nav ul { margin:0; /*added*/ }

Updated DEMO

Answer 2

只需将其添加到您的css样式中：

ul{
  margin: 0;
}

Ul的自动保证金为16像素;来自html

Answer 3

删除导航ul

上方的边距

nav ul {
  margin-top: 0px;
  list-style-type: none;
}

如何摆脱导航栏和标题图像之间的空间

3 个答案:

Updated DEMO