我已经更改了标题，并且对结果感到非常满意，但是我的h1不在标题上方，而是在标题下方。
我已经更改了z-index，top，margin-top，padding等，但是它仍然不在标题的顶部，而是紧贴标题的下方。
#banner {
box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
width: 100%;
height: 70px;
z-index: 99999;
position: fixed;
top: 0;
left: 0;
}
header {
position: relative;
width: 100%;
height: 70px;
margin: 0 auto;
}
header hgroup {
position: absolute;
display: block;
top: 5px;
left: 20px;
}
header hgroup h1 {
font-size: 50px;
display: block;
height: 100px;
width: 610px;
}
nav {
float: right;
}
nav ul li:hover > ul {
display: block;
}
nav ul {
margin-top: 10px;
padding: 0 20px;
list-style: none;
position: relative;
display: inline-table;
}
nav ul:after {
content: "";
clear: both;
display: block;
}
nav ul li {
float: left;
}
nav ul li a {
display: block;
padding: 15px 15px;
font-family: 'Crimson Text', sans-serif;
text-decoration: none;
}
body {
background: #dcdcdc;
font-family: 'Montserrat', sans-serif;
font-weight: 300;
margin: 0px;
}
p, h1 {
font-family: 'Crimson Text', Serif;
}
ul, li {
list-style-type: none;
}
ul li {
display: inline-block;
box-sizing: border-box;
text-align: left;
}
.main-button {
display: inline-block;
width: 79px;
padding: 10px;
box-sizing: border-box;
text-align: center;
font-size: 16px;
}
.main-button:hover {
background: rgba(255, 255, 255, 0.1);
transition: 1s;
cursor: pointer;
}
h3 {
text-align: center;
font-size: 44px;
}
.container {
box-sizing: border-box;
margin: auto;
max-width: 70%;
padding: 20px;
}
.button {
display: inline-block;
width: 130px;
margin: 10px;
padding: 10px;
text-align: center;
text-decoration: none;
}
.button:hover {
background: rgb(0, 105, 242);
transition: 0.25s;
color: white;
cursor: pointer;
}
a {
text-decoration: none;
}
a:hover {
color: white;
transition: 0.5s;
}
.content1 {
background: rgba(255, 255, 255, 0.15);
}
.content2 {
background: rgba(255, 255, 255, 0.1);
}
@keyframes example {
0% {color: #e91e63;}
14% {color: #e74c3c;}
28% {color: #f1c40f;}
42% {color: #2ecc71;}
56% {color: #3498db;}
72% {color: #71368a;}
86% {color: #9b59b6;}
100% {color: #91e63;}
}
body, a {
color: red;
animation-name: example;
animation-duration: 10s;
animation-iteration-count: infinite;
}
.menu-list {
list-style-type: disc;
margin-block-start: 0;
margin-block-end: 0;
margin-inline-start: 0;
margin-inline-end: 0;
padding-inline-start: 0;
}
.menu-list .li {
margin: auto;
display: flex;
width: 60%;
/* 'justify-content: space-between;' does the trick of
separating the two items in the li */
justify-content: space-between;
border-bottom: 1px dotted;
}
.menu-list .li .title,
.menu-list .li .price {
display: flex;
}
.menu-list .li .title {
font-size: 18px;
align-self: flex-end;
}
.menu-list .li .price {
font-size: 30px;
}<html>
<head>
<link rel="stylesheet" type="text/css" href="website.css">
<link href="https://fonts.googleapis.com/css?family=Crimson+Text|Montserrat" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css">
</head>
<body>
<div id="banner">
<header>
<hgroup>
<h1>Silver · Spoon</h1>
</hgroup>
<nav>
<ul>
<li class="main-button home-button"><a class='page-button' data-page_num='1' href='javascript:voide(0)'>Home</a></li>
<li class="main-button menu1-button"><a class='page-button' data-page_num='2' href='javascript:voide(0)'>Drinks</a></li>
<li class="main-button menu2-button"><a class='page-button' data-page_num='3' href='javascript:voide(0)'>Snacks</a></li>
<li class="main-button about-button"><a class='page-button' data-page_num='4' href='javascript:voide(0)'>About</a></li>
</ul>
</nav>
</header>
</div>
<div class="page">
<div id="Home">
<div class="content1">
<div class="container">
<a class='page-button' data-page_num='2' href='javascript:voide(0)'>
<h3>Drinks Menu</h3>
</a>
<h4>Buy one, get 50% off.</h4>
<p>Silver Spoon has high-quality drinks that will quench your thirst at an affordable price. Find out more on the drinks menu.</p>
</div>
</div>
<div class="content2">
<div class="container">
<a class='page-button' data-page_num='3' href='javascript:voide(0)'>
<h3>Snacks Menu</h3>
</a>
<h4>Now introducing edible food.</h4>
<p>Silver Spoon has a high-quality snacks menu with affordable prices. Find out more on the food menu page.</p>
</div>
<div class="content1">
<div class="container">
<h3>About</h3>
<p>Read more about Silver Spoon on our about page.</p>
</div>
</div>
</div>
</div>
</div>
<div class="page">
<div id="Drinks">
<ul class="menu-list">
<li class="li"><span class="title">Cafe Americano</span><span class="price">3<sup>99</sup></span></li>
<li class="li"><span class="title">Iced Latte</span><span class="price">4<sup>99</sup></span></li>
<li class="li"><span class="title">Caramel Macchiato</span><span class="price">5<sup>50</sup></span></li>
<li class="li"><span class="title">Espresso</span><span class="price">4<sup>50</sup></span></li>
<li class="li"><span class="title">Blonde Roast</span><span class="price">3<sup>00</sup></span></li>
<li class="li"><span class="title">Iced Coffee w/ Milk</span><span class="price">4<sup>00</sup></span></li>
<li class="li"><span class="title">Cold Brew w/ Foam</span><span class="price">4<sup>50</sup></span></li>
<li class="li"><span class="title">Dark Roast</span><span class="price">3<sup>00</sup></span></li>
<li class="li"><span class="title">Hot Chocolate</span><span class="price">4<sup>00</sup></span></li>
</div>
</div>
</div>
<div class="page">
<div id="About">
<div class="content1">
<div class="container">
<h3>About Us</h3>
<p>Silver Spoon is dedicated to producing affordable but exquisite food that will satisfy our customers. </p>
</div>
</div>
</div>
</div>
</body>
</html>
我希望h1位于标题上方，而不是下方。
答案 0 :(得分：2)
您在h1标签上将高度设置为100px，却忘记了h1-h6标签的内置边距。删除不必要的填充和边距的最快方法是添加到您的CSS代码中：
* {
margin: 0;
padding: 0;
}
答案 1 :(得分：2)
在您的代码中添加margin: 0，为了美观，我将字体大小减小了10px
#banner {
box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
width: 100%;
height: 70px;
z-index: 99999;
position: fixed;
top: 0;
left: 0;
}
header {
position: relative;
width: 100%;
height: 70px;
margin: 0 auto;
}
header hgroup {
position: absolute;
display: block;
top: 5px;
left: 20px;
}
header hgroup h1 {
margin: 0;
font-size: 40px;
display: block;
height: 100px;
width: 610px;
}
nav {
float: right;
}
nav ul li:hover > ul {
display: block;
}
nav ul {
margin-top: 10px;
padding: 0 20px;
list-style: none;
position: relative;
display: inline-table;
}
nav ul:after {
content: "";
clear: both;
display: block;
}
nav ul li {
float: left;
}
nav ul li a {
display: block;
padding: 15px 15px;
font-family: 'Crimson Text', sans-serif;
text-decoration: none;
}
body {
background: #dcdcdc;
font-family: 'Montserrat', sans-serif;
font-weight: 300;
margin: 0px;
}
p, h1 {
font-family: 'Crimson Text', Serif;
}
ul, li {
list-style-type: none;
}
ul li {
display: inline-block;
box-sizing: border-box;
text-align: left;
}
.main-button {
display: inline-block;
width: 79px;
padding: 10px;
box-sizing: border-box;
text-align: center;
font-size: 16px;
}
.main-button:hover {
background: rgba(255, 255, 255, 0.1);
transition: 1s;
cursor: pointer;
}
h3 {
text-align: center;
font-size: 44px;
}
.container {
box-sizing: border-box;
margin: auto;
max-width: 70%;
padding: 20px;
}
.button {
display: inline-block;
width: 130px;
margin: 10px;
padding: 10px;
text-align: center;
text-decoration: none;
}
.button:hover {
background: rgb(0, 105, 242);
transition: 0.25s;
color: white;
cursor: pointer;
}
a {
text-decoration: none;
}
a:hover {
color: white;
transition: 0.5s;
}
.content1 {
background: rgba(255, 255, 255, 0.15);
}
.content2 {
background: rgba(255, 255, 255, 0.1);
}
@keyframes example {
0% {color: #e91e63;}
14% {color: #e74c3c;}
28% {color: #f1c40f;}
42% {color: #2ecc71;}
56% {color: #3498db;}
72% {color: #71368a;}
86% {color: #9b59b6;}
100% {color: #91e63;}
}
body, a {
color: red;
animation-name: example;
animation-duration: 10s;
animation-iteration-count: infinite;
}
.menu-list {
list-style-type: disc;
margin-block-start: 0;
margin-block-end: 0;
margin-inline-start: 0;
margin-inline-end: 0;
padding-inline-start: 0;
}
.menu-list .li {
margin: auto;
display: flex;
width: 60%;
/* 'justify-content: space-between;' does the trick of
separating the two items in the li */
justify-content: space-between;
border-bottom: 1px dotted;
}
.menu-list .li .title,
.menu-list .li .price {
display: flex;
}
.menu-list .li .title {
font-size: 18px;
align-self: flex-end;
}
.menu-list .li .price {
font-size: 30px;
}<html>
<head>
<link rel="stylesheet" type="text/css" href="website.css">
<link href="https://fonts.googleapis.com/css?family=Crimson+Text|Montserrat" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css">
</head>
<body>
<div id="banner">
<header>
<hgroup>
<h1>Silver · Spoon</h1>
</hgroup>
<nav>
<ul>
<li class="main-button home-button"><a class='page-button' data-page_num='1' href='javascript:voide(0)'>Home</a></li>
<li class="main-button menu1-button"><a class='page-button' data-page_num='2' href='javascript:voide(0)'>Drinks</a></li>
<li class="main-button menu2-button"><a class='page-button' data-page_num='3' href='javascript:voide(0)'>Snacks</a></li>
<li class="main-button about-button"><a class='page-button' data-page_num='4' href='javascript:voide(0)'>About</a></li>
</ul>
</nav>
</header>
</div>
<div class="page">
<div id="Home">
<div class="content1">
<div class="container">
<a class='page-button' data-page_num='2' href='javascript:voide(0)'>
<h3>Drinks Menu</h3>
</a>
<h4>Buy one, get 50% off.</h4>
<p>Silver Spoon has high-quality drinks that will quench your thirst at an affordable price. Find out more on the drinks menu.</p>
</div>
</div>
<div class="content2">
<div class="container">
<a class='page-button' data-page_num='3' href='javascript:voide(0)'>
<h3>Snacks Menu</h3>
</a>
<h4>Now introducing edible food.</h4>
<p>Silver Spoon has a high-quality snacks menu with affordable prices. Find out more on the food menu page.</p>
</div>
<div class="content1">
<div class="container">
<h3>About</h3>
<p>Read more about Silver Spoon on our about page.</p>
</div>
</div>
</div>
</div>
</div>
<div class="page">
<div id="Drinks">
<ul class="menu-list">
<li class="li"><span class="title">Cafe Americano</span><span class="price">3<sup>99</sup></span></li>
<li class="li"><span class="title">Iced Latte</span><span class="price">4<sup>99</sup></span></li>
<li class="li"><span class="title">Caramel Macchiato</span><span class="price">5<sup>50</sup></span></li>
<li class="li"><span class="title">Espresso</span><span class="price">4<sup>50</sup></span></li>
<li class="li"><span class="title">Blonde Roast</span><span class="price">3<sup>00</sup></span></li>
<li class="li"><span class="title">Iced Coffee w/ Milk</span><span class="price">4<sup>00</sup></span></li>
<li class="li"><span class="title">Cold Brew w/ Foam</span><span class="price">4<sup>50</sup></span></li>
<li class="li"><span class="title">Dark Roast</span><span class="price">3<sup>00</sup></span></li>
<li class="li"><span class="title">Hot Chocolate</span><span class="price">4<sup>00</sup></span></li>
</div>
</div>
</div>
<div class="page">
<div id="About">
<div class="content1">
<div class="container">
<h3>About Us</h3>
<p>Silver Spoon is dedicated to producing affordable but exquisite food that will satisfy our customers. </p>
</div>
</div>
</div>
</div>
</body>
</html>
答案 2 :(得分：1)
将margin:0;添加到header hgroup h1
#banner {
box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
width: 100%;
height: 70px;
z-index: 99999;
position: fixed;
top: 0;
left: 0;
}
header {
position: relative;
width: 100%;
height: 70px;
margin: 0 auto;
}
header hgroup {
position: absolute;
display: block;
top: 5px;
left: 20px;
}
header hgroup h1 {
margin: 0;
font-size: 40px;
display: block;
height: 100px;
width: 610px;
}
nav {
float: right;
}
nav ul li:hover > ul {
display: block;
}
nav ul {
margin-top: 10px;
padding: 0 20px;
list-style: none;
position: relative;
display: inline-table;
}
nav ul:after {
content: "";
clear: both;
display: block;
}
nav ul li {
float: left;
}
nav ul li a {
display: block;
padding: 15px 15px;
font-family: 'Crimson Text', sans-serif;
text-decoration: none;
}
body {
background: #dcdcdc;
font-family: 'Montserrat', sans-serif;
font-weight: 300;
margin: 0px;
}
p, h1 {
font-family: 'Crimson Text', Serif;
}
ul, li {
list-style-type: none;
}
ul li {
display: inline-block;
box-sizing: border-box;
text-align: left;
}
.main-button {
display: inline-block;
width: 79px;
padding: 10px;
box-sizing: border-box;
text-align: center;
font-size: 16px;
}
.main-button:hover {
background: rgba(255, 255, 255, 0.1);
transition: 1s;
cursor: pointer;
}
h3 {
text-align: center;
font-size: 44px;
}
.container {
box-sizing: border-box;
margin: auto;
max-width: 70%;
padding: 20px;
}
.button {
display: inline-block;
width: 130px;
margin: 10px;
padding: 10px;
text-align: center;
text-decoration: none;
}
.button:hover {
background: rgb(0, 105, 242);
transition: 0.25s;
color: white;
cursor: pointer;
}
a {
text-decoration: none;
}
a:hover {
color: white;
transition: 0.5s;
}
.content1 {
background: rgba(255, 255, 255, 0.15);
}
.content2 {
background: rgba(255, 255, 255, 0.1);
}
@keyframes example {
0% {color: #e91e63;}
14% {color: #e74c3c;}
28% {color: #f1c40f;}
42% {color: #2ecc71;}
56% {color: #3498db;}
72% {color: #71368a;}
86% {color: #9b59b6;}
100% {color: #91e63;}
}
body, a {
color: red;
animation-name: example;
animation-duration: 10s;
animation-iteration-count: infinite;
}
.menu-list {
list-style-type: disc;
margin-block-start: 0;
margin-block-end: 0;
margin-inline-start: 0;
margin-inline-end: 0;
padding-inline-start: 0;
}
.menu-list .li {
margin: auto;
display: flex;
width: 60%;
/* 'justify-content: space-between;' does the trick of
separating the two items in the li */
justify-content: space-between;
border-bottom: 1px dotted;
}
.menu-list .li .title,
.menu-list .li .price {
display: flex;
}
.menu-list .li .title {
font-size: 18px;
align-self: flex-end;
}
.menu-list .li .price {
font-size: 30px;
}<html>
<head>
<link rel="stylesheet" type="text/css" href="website.css">
<link href="https://fonts.googleapis.com/css?family=Crimson+Text|Montserrat" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css">
</head>
<body>
<div id="banner">
<header>
<hgroup>
<h1>Silver · Spoon</h1>
</hgroup>
<nav>
<ul>
<li class="main-button home-button"><a class='page-button' data-page_num='1' href='javascript:voide(0)'>Home</a></li>
<li class="main-button menu1-button"><a class='page-button' data-page_num='2' href='javascript:voide(0)'>Drinks</a></li>
<li class="main-button menu2-button"><a class='page-button' data-page_num='3' href='javascript:voide(0)'>Snacks</a></li>
<li class="main-button about-button"><a class='page-button' data-page_num='4' href='javascript:voide(0)'>About</a></li>
</ul>
</nav>
</header>
</div>
<div class="page">
<div id="Home">
<div class="content1">
<div class="container">
<a class='page-button' data-page_num='2' href='javascript:voide(0)'>
<h3>Drinks Menu</h3>
</a>
<h4>Buy one, get 50% off.</h4>
<p>Silver Spoon has high-quality drinks that will quench your thirst at an affordable price. Find out more on the drinks menu.</p>
</div>
</div>
<div class="content2">
<div class="container">
<a class='page-button' data-page_num='3' href='javascript:voide(0)'>
<h3>Snacks Menu</h3>
</a>
<h4>Now introducing edible food.</h4>
<p>Silver Spoon has a high-quality snacks menu with affordable prices. Find out more on the food menu page.</p>
</div>
<div class="content1">
<div class="container">
<h3>About</h3>
<p>Read more about Silver Spoon on our about page.</p>
</div>
</div>
</div>
</div>
</div>
<div class="page">
<div id="Drinks">
<ul class="menu-list">
<li class="li"><span class="title">Cafe Americano</span><span class="price">3<sup>99</sup></span></li>
<li class="li"><span class="title">Iced Latte</span><span class="price">4<sup>99</sup></span></li>
<li class="li"><span class="title">Caramel Macchiato</span><span class="price">5<sup>50</sup></span></li>
<li class="li"><span class="title">Espresso</span><span class="price">4<sup>50</sup></span></li>
<li class="li"><span class="title">Blonde Roast</span><span class="price">3<sup>00</sup></span></li>
<li class="li"><span class="title">Iced Coffee w/ Milk</span><span class="price">4<sup>00</sup></span></li>
<li class="li"><span class="title">Cold Brew w/ Foam</span><span class="price">4<sup>50</sup></span></li>
<li class="li"><span class="title">Dark Roast</span><span class="price">3<sup>00</sup></span></li>
<li class="li"><span class="title">Hot Chocolate</span><span class="price">4<sup>00</sup></span></li>
</div>
</div>
</div>
<div class="page">
<div id="About">
<div class="content1">
<div class="container">
<h3>About Us</h3>
<p>Silver Spoon is dedicated to producing affordable but exquisite food that will satisfy our customers. </p>
</div>
</div>
</div>
</body>
</div>
</body>
</html>
答案 3 :(得分：0)
在CSS中添加一个具有属性margin-top: 0px; margin-bottom: 0px的类，并将其应用于您的h1标签。例）
CSS：
.header-fix {
margin-top: 0px;
margin-bottom: 0px;
}
然后在您的 html 中：
<h1 class="header-fix">Silver · Spoon</h1>
我能够通过使用元素检查器（在大多数浏览器中为F12）并应用某些样式来快速找到所需的结果。在这种情况下，有助于快速确定样式问题的修复程序。