Question

希望有人能解释为什么＆＃34; nav＆＃34;之间存在差距？和＃34;标题＆＃34; DIVS？我认为这与文本有关，但无法找到适合CSS的解决方案。任何帮助都非常感激：）

＆＃13;

html, body{
	margin: 0;
	padding: 0;
	height:100%;
}

body {
	background-color: black;
	font-size: 0.8em;
}

audio { 
	width: 300px; 
}

.header {
	width: 100%;
	height: 10%;
	font-size: 0.9em;
	font-family: sans-serif;
	text-align: center;
	color: white;
	background-color: brown;
	padding: 0;
	margin: 0;
}

.nav {
	width: 100%;
	height: 7%;
	padding: 0;
	margin: 0;
	background-color: grey;
}

#main {
	width: 100%;
	height: 100%;
}

.lyrics {
	max-width: 80%;
	margin: 0 auto;
	height: auto;
	padding: 20px 50px 20px 50px;
	color: white;
}

＆＃13;

<html>
<head>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<title>
	Test
</title>
<body>
	<div id="main">
	<div class="nav">
	</div><!-- nav -->
	<div class="header">
	<h1>Web Page</h1>
	</div><!--header-->
	
	<div class="lyrics">
	<p>text1</p>

	<p>text2</p>

	<p>text3</p>

	</div> <!-- lyrics -->
	
	</div> <!-- main div -->
</body>
</html>

＆＃13;

Answer 1

我相信你在谈论网页＆＃34;网页上方的黑色空间。标题？在这种情况下，您只需要删除h1的上边距，就像我在下面所做的那样：

＆＃13;

html, body{
	margin: 0;
	padding: 0;
	height:100%;
}

body {
	background-color: black;
	font-size: 0.8em;
}

audio { 
	width: 300px; 
}

.header {
	width: 100%;
	height: 10%;
	font-size: 0.9em;
	font-family: sans-serif;
	text-align: center;
	color: white;
	background-color: brown;
	padding: 0;
	margin: 0;
}

.nav {
	width: 100%;
	height: 7%;
	padding: 0;
	margin: 0;
	background-color: grey;
}

#main {
	width: 100%;
	height: 100%;
}

.lyrics {
	max-width: 80%;
	margin: 0 auto;
	height: auto;
	padding: 20px 50px 20px 50px;
	color: white;
}

h1 { margin-top: 0; }

＆＃13;

<html>
<head>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<title>
	Test
</title>
<body>
	<div id="main">
	<div class="nav">
	</div><!-- nav -->
	<div class="header">
	<h1>Web Page</h1>
	</div><!--header-->
	
	<div class="lyrics">
	<p>text1</p>

	<p>text2</p>

	<p>text3</p>

	</div> <!-- lyrics -->
	
	</div> <!-- main div -->
</body>
</html>

＆＃13;

Answer 2

删除h1的上边距

为什么导航和标题div之间存在间隙/空格？

2 个答案: