CODEWITHSUNDEEP
htmlcss
cssnoob
cssnoob

Reputation: 61

Why is there a gap/space between the navigation and header divs?

hoping someone can explain why there is a gap between the "nav" and "header" divs? I think its something to do with the text but can't find the right solution for the CSS. Any help is much appreciate :)

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;
}
<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>

Upvotes: 1

Views: 112

Answers (2)

Thomas
Thomas

Reputation: 60

remove the top margin of the h1

Upvotes: 0

Michaeldcooney
Michaeldcooney

Reputation: 1445

I believe you are talking about the black space above the "Web Page" title? In which case you just need to remove the top margin of the h1 like I did below:

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; }
<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>

Upvotes: 1

Related Questions