我没有使用 bootstrap，但是我想在我的 Nav 正下方添加一个类似 div 的“Jumbotron”。
但是，我的导航栏和 div 之间有一个小的空白区域，我不知道它从哪里获得边距。
我用过 chrome 元素检查器，它们之间没有可识别的边距。
我已将正文标签设置为 0 边距和 0 填充，我尝试将各种元素和标签调整为 0，唯一有效的是 *，但我希望尽可能避免使用星号。
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="Display01.css">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<title>Display 01</title>
</head>
<body>
<!-- Ignore the nav - It is used to modeling purposes-->
<!-- Jump to line 27 -->
<nav>
<div class="toggle">
<h3>Logo</h3>
<i id="menu" class="fas fa-bars"></i>
</div>
<ul>
<li><a href="#"></a>Home</li>
<li><a href="#"></a>About</li>
<li><a href="#"></a>Services</li>
<li><a href="#"></a>Portfolio</li>
<li><a href="#"></a>Contact</li>
</ul>
</nav>
<!-- Begin Main Content -->
<div class="display"><p>Test</p></div>
<script type="text/javascript" src="Display01.js"></script>
</body>
</html>
.display {
margin-bottom: 2rem;
margin-top: 0;
background-color: #e9ecef;
padding-right: 0;
padding-left: 0;
border-radius: 0;
width: 100vw;
height: 50vh;
}
/*CSS Used for Navbar for Modeling Purposes*/
body {
margin: 0;
padding: 0;
font-family: sans-serif;
}
nav {
width: 100%;
background-color: #00316b;
color: #fff;
text-decoration: none;
overflow: auto;
}
ul {
width: 80%;
margin: 0 auto;
padding: 0;
}
ul li {
list-style: none;
display: inline-block;
padding: 20px;
font-weight: bold;
transition: 0.5s;
}
ul li:hover {
/*background-color: #e91e63;*/
background-color: white;
color: #000;
border-radius: 15px;
}
h3 {
float: left;
position:relative;
margin: 0 0 20px 10px;
}
.menu {
float: right;
}
.toggle {
width: 100%;
padding: 10px;
background-color: #00316b;
text-align: right;
box-sizing: border-box;
font-size: 30px;
display: none;
}
@media (max-width:768px){
.toggle {
display: block;
}
ul {
width: 100%;
display: none;
transition: 1.0s;
}
ul li {
display: block;
text-align: center;
}
.active {
display: block;
}
}
我希望 Display Div 与导航栏齐平，没有空白。
一段时间以来，我一直在努力解决这个问题，非常感谢您提供的帮助。
最佳答案
边距来自显示 div 内的段落元素。您可以删除该边距。
您还可以为显示 div 设置负边距。
当您使用开发者工具最左上角的按钮，然后将鼠标悬停在不同的元素上时，您可以看到边距的来源。
关于html - 导航栏和 "Jumbotron"之间的空白，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56008557/