Menu
I've just learning HTML/CSS for a few days and I'm having trouble with this:
Why there is a blank line at the top of the page? Can someone tell me what was wrong or missing from my code? How can I fix it?
Here's my code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body {
margin: 0;
padding: 0;
}
header {
text-align: center;
background-color: lightgray;
}
header h1 {
font-size: 70px;
}
ul {
background-color: gray;
padding: 10px;
}
li {
display: inline;
margin: 0 5px 0 5px;
}
a {
color: white;
text-decoration: none;
text-transform: uppercase;
font-size: 18px;
}
</style>
</head>
<body>
<header>
<h1>My Website</h1>
<p>A sample website</p>
<ul>
<li><a href="#">HOMEPAGE</a></li>
<li><a href="#">ABOUT ME</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</header>
</body>
</html>Thanks in advance!
334
asked Oct 15 '25 22:10
This occurs because of parent and first child margin collapsing between the h1 and the margin of its parent element(s)
One solution would be to add border: 1px solid lightgray or add padding, or you can reset the margin itself to zero - see demo below:
body {
margin: 0;
padding: 0;
}
header {
text-align: center;
background-color: lightgray;
border: 1px solid lightgray;
}
header h1 {
font-size: 70px;
}
ul {
background-color: gray;
padding: 10px;
}
li {
display: inline;
margin: 0 5px 0 5px;
}
a {
color: white;
text-decoration: none;
text-transform: uppercase;
font-size: 18px;
}<header>
<h1>My Website</h1>
<p>A sample website</p>
<ul>
<li><a href="#">HOMEPAGE</a></li>
<li><a href="#">ABOUT ME</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</header>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
