如果这是一个愚蠢的问题,我们深表歉意!我已经阅读了所有与此相关的问题并尝试了解决方案,但我仍然无法让我的空白消失。
我正在通过 Codecademy 学习 HTML 和 CSS,当我将我的代码复制到 codepen 时,导航和超大屏幕之间出现了一个空白区域。
我试过删除边距,但无法让它消失。提前致谢。
.container {
max-width: 940px;
margin: 0;
padding: 0;
}
.header {
background-color: #30627E;
display: inline-block;
width: 100%;
margin-bottom: 0;
padding-bottom: 0;
}
.header ul {
list-style: none;
text-align: center;
padding: 0;
margin-bottom: 0;
color: #fff;
display: inline-block;
}
.nav li {
color: #fff;
display: inline-block;
padding: 20px 30px;
text-align: center;
font-size: 20px;
margin-bottom: 0;
}
.navbar-nav {
margin-bottom: 20px;
}
.header .main {
background-color: #E52364;
font-size: 28px;
margin: 0;
}
.jumbotron {
background: url(https://s3.amazonaws.com/codecademy-content/projects/adoptly/bg.jpg) repeat center center;
background-size: cover;
height: 500px;
margin-top: 0;
margin-bottom: 0;
padding: 0;
text-align: center;
}
.jumbotron h1 {
color: #E52364 !important;
text-align: center;
font-weight: bold;
margin-top: 0;
padding: 0;
}
<div class="header">
<div class="container">
<div class="row">
<ul class="nav navbar-nav">
<li class="main">Adoptly</li>
<li>About</li>
<li>Animals</li>
<li>Blog</li>
<li>Events</li>
</ul>
</div>
</div>
</div>
<div class="jumbotron">
<div class="container">
<h1>Meet your new best friend.</h1>
</div>
</div>
最佳答案
这是臭名昭著的 HTML 内联 block 元素空间造成的。通常您必须删除 HTML 标记之间的实际空格,但将 .header
简单地转换为 block
级别元素会更容易:
.header {
⋮
display: block;
}
jsFiddle:https://jsfiddle.net/azizn/mpxnu8og/
关于html - 如何删除导航和超大屏幕之间的空白区域?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38947541/