为什么页面顶部有空白行? [英] Why there is a blank line at the top of the page?
本文介绍了为什么页面顶部有空白行?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我刚学习HTML/CSS了几天，但是遇到了麻烦: 为什么页面顶部有空白行?有人可以告诉我代码中有什么错误或遗漏吗?我该如何解决?
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?
这是我的代码:
<!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>
提前谢谢！
推荐答案
This occurs because of parent and first child margin collapsing between the h1 and the margin of its parent element(s)
一种解决方案是添加border: 1px solid lightgray或添加padding，或者您可以将margin本身重置为零-请参见下面的演示
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>
这篇关于为什么页面顶部有空白行?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
