<分区>
<分区>
页眉部分和图像之间有一个小间隙,我怎样才能去掉它?有某种违约 margin 吗?横幅中有图像。
html,
body {
font-family: Bahnschrift;
font-size: 13;
}
.wrap {
max-width: 1100px;
margin: 0 auto;
}
header {
width: 100%;
height: 108px;
background-color: #001e22;
}
img {
margin-top: 17px;
}
nav {
float: right;
margin-top: 35px;
}
li {
font-size: 18px;
display: inline-block;
margin-left: 48px;
}
a {
color: white;
text-decoration: none;
}
.banner {
width: 100%;
height: 500px;
}
<header>
<div class="wrap">
<img src="logo.png">
<nav>
<ul>
<li><a href="">CONTACT US</a></li>
<li><a href="">SOFTWARE USED</a></li>
<li><a href="">PROJECT</a></li>
<li><a href="">ABOUT US</a></li>
<li><a href="">HOME</a></li>
</ul>
</nav>
</div>
</header>
<section class="banner">
<img src="building.png" alt="banner">
</section>
最佳答案
您的 img
选择器还在主体中的图像上放置了边距,因此您需要更加具体(例如使用 header > img
)
html,
body {
font-family: Bahnschrift;
font-size: 13;
}
.wrap {
max-width: 1100px;
margin: 0 auto;
}
header {
width: 100%;
height: 108px;
background-color: #001e22;
}
header > img {
margin-top: 17px;
}
nav {
float: right;
margin-top: 35px;
}
li {
font-size: 18px;
display: inline-block;
margin-left: 48px;
}
a {
color: white;
text-decoration: none;
}
关于html - 如何消除标题和下图之间的差距?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53614046/