Question

我正在尝试使我的标题（.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>

Answer 1

请给出以下css。它将删除浏览器所采用的h1标签的默认填充和边距。

h1 {
    margin: 0;
    padding:0; 
}

元素有默认的边距和填充。

您也可以删除所有选择器。

* {
    margin: 0;
    padding: 0;
}

<强> Working Fiddle

在标题上方获得宽阔的空间

1 个答案: