<!doctype html>
<html>
<head>
<title>Page Title</title>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0">
<style>
body{
padding:0;
margin:0;
font-family:sans-serif;
}
.container{
width:80%;
margin:0 auto;
}
header{
margin:0;
min-height:90px;
background-color: #344249;
border-bottom:#e8491d 3px solid;
}
header h1{
float:left;
}
h1 span{
margin-left:70px;
display:inline-block;
color:#db1c1c;
}
nav{
float:right;
}
nav ul li{
display: inline-block;
list-style: none;
}
nav ul li a{
display:inline-block;
text-decoration:none;
padding:10px;
margin-top:12px;
color:white;
border:2px solid #be1414;
background-color:#be1414;
margin:5px;
border-radius:4px
}
nav ul li a:hover{
background-color:black;
color:red;
}
#one{
min-height:400px;
background:url('./img/showcase.jpg') no-repeat 0 -400px;
text-align:center;
color:#ffffff;
margin:0;
}
#one h1{
margin-top:100px;
font-size:55px;
margin-bottom:10px;
}
#one p{
font-size:20px;
}
</style>
</head>
<body>
<header>
<div class="container">
<div id="branding">
<h1> <span>ė</span>View</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">AboutUs</a></li>
<li><a href="#">Services</a></li>
</ul>
</nav>
</div>
</div>
</header>
<section id="one">
<div class="container">
<h1> Welcome To Tech
</h1>
<p> This is a <br>
Example </p>
</div>
</section>
</body>
</html>
输出
//这里不必要的保证金正在标题H1上，该h1从标题中拉出我的部分，留下了不必要的空间。我尝试了多种方法使该差距禁用，但无法找到适当的解决方案
我想将保证金顶在标题H1上作为ID One的标题H1，以使其在中心位置对齐，这就是为什么我使用#one H1 {保证金：100px}
通过写入幅度等于0的内部ID INS INS In In In In VIN H1消失标题和截面之间的差距，但在ID上阻塞了H1的保证金设施。
尝试为您的标题
.header{
position:absolute;
top: 0;
right: 0;
left: 0;
height:90px;
background-color: #344249;
border-bottom:#e8491d 3px solid;
}
#one h1{
margin-top:100px;
position: absolute;
top:90px;
font-size:55px;
margin-bottom:10px;
}
，而不是制作标签<header>只需制作<div class="header">
您可能必须对其他CSS规则进行一些调整，只要您有任何问题就会发表评论：(
将 margin-top更改为 padding-top
#one h1{
padding-top:100px;
font-size:55px;
margin-bottom:10px;
}
基本上，margin在元素内推出padding空间。