我正在尝试使标头（.navbar）固定，但是当我将位置设置为固定时，我在标头上方获得了较大的空间，因此我通过放置边距（-22 0 0 0）来固定了它，但是我有点困惑将边距设置为负
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
html {
font-family: sans-serif;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
body {
margin:0;
padding:0;
}
.navbar{
height:86px;
width:100%;
background-color:#0083C1;
position:fixed;
margin:-22px 0 0 0;
}
#site-logo{
height:70px;
width:200px;
background-color:#0083C1;
margin:2px 2px 0 1px;
float:left;
}
.navmenu{
height:55px;
width:800px;
background-color:#0083C1;
margin:15px 0 0 500px;
}
.navmenu ul{
float:left;
}
.navmenu ul li{
list-style-type:none;
display:inline-block;
text-align:center;
}
.navmenu ul li a{
text-decoration:none;
padding:15px;
color:#ffffff;
font-family: arial,sans-serif;
}
.navmenu ul li a:hover{
border-bottom: 4px solid #ffffff;
}
.navmenu ul li a:focus{
border-bottom: 4px solid #ffffff;
}
</style>
<title></title>
</head>
<body>
<header class="navbar">
<div id="site-logo">
</div>
<nav>
<div class="navmenu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Partners</a></li>
<li><a href="#">Clients</a></li>
<li><a href="#">Vision</a></li>
<li><a href="#">Careers</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
</nav>
</header>
<h1>Hello</h1>
<h1>Hello</h1>
<h1>Hello</h1>
<h1>Hello</h1>
<h1>Hello</h1>
<h1>Hello</h1>
<h1>Hello</h1>
<h1>Hello</h1>
<h1>Hello</h1>
<h1>Hello</h1>
<h1>Hello</h1>
<h1>Hello</h1>
<h1>Hello</h1>
<h1>Hello</h1>
<h1>Hello</h1>
<h1>Hello</h1>
<h1>Hello</h1>
<h1>Hello</h1>
<h1>Hello</h1>
<h1>Hello</h1>
</body>
</html>
最佳答案
只要给下面的CSS。它将删除浏览器采用的默认填充和h1标签的边距。
h1 {
margin: 0;
padding:0;
}
元素具有默认的边距和填充。
您可以删除所有选择器。
* {
margin: 0;
padding: 0;
}
Working Fiddle