我正在开展一个小项目，但我遇到了一个问题。在bgContainer类中有两位文本，它们之间有一个边距，但我不想要任何边距，我不知道边距来自哪里。根据chrome，标题文本的边距是200px，但据我所知，我的css中没有我设置的情况。我也使用bootstrap 4 beta 2.感谢任何帮助，谢谢。
@charset "UTF-8";
.sidenav {
height: 100%;
width: 0;
position: fixed;
overflow-y: auto;
z-index: 1;
top: 0;
left: 0;
font-family: 'Helvetica Neue', Gotham, Helvetica, Arial, 'sans-serif';
font-weight: 200;
font-size: 1em;
background-color: #e9ecef;
overflow-x: hidden;
padding-top: 60px;
transition: 0.5s;
}
.sidenav .sidebar-header {
font-family: "Bebas Neue";
font-size: 2em;
font-weight: 600;
padding: 0 20px;
}
.sidenav ul.components {
padding: 10px 0;
}
.sidenav ul p {
color: #fff;
padding: 5px 10px;
}
.sidenav ul li a {
color: #5C5C5C;
text-decoration: none;
padding: 5px 10px;
display: block;
}
.sidenav ul li a:hover {
color: #5C5C5C;
background: #fff;
transform: scale(1.01);
}
.sidenav ul li.active {
color: #e9ecef;
}
.sidenav ul li.current > a {
color: #e9ecef;
background-color: #5C5C5C;
}
ul ul a {
font-size: 0.9em !important;
padding-left: 30px !important;
background: #D0D0D0;
}
a[data-toggle="collapse"] {
position: relative;
}
a[aria-expanded="false"]::before, a[aria-expanded="true"]::before {
content: '\f0d7';
display: block;
position: absolute;
right: 20px;
top: 7px;
font-family: FontAwesome;
font-size: 0.8em;
font-style: normal;
font-weight: normal;
}
a[aria-expanded="true"]::before {
content: '\f0d8';
}
#main {
transition: margin-left .5s;
}
@media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
.navButton {
padding: 10px;
display: inline-block;
cursor: pointer;
}
.bar1, .bar2, .bar3 {
width: 20px;
height: 3px;
background-color: #e9ecef;
margin: 3px 0;
transition: 0.4s;
}
.change .bar1 {
-webkit-transform: rotate(-45deg) translate(0px, 8px) ;
transform: rotate(-45deg) translate(0px, 8px) ;
}
.change .bar2 {
opacity: 0;
}
.change .bar3 {
-webkit-transform: rotate(45deg) translate(0px, -8px) ;
transform: rotate(45deg) translate(0px, -8px) ;
}
.bgConatiner {
padding: 20px;
vertical-align: middle;
height: 510px;
margin-top: 0px;
margin-bottom: 0px;
}
.header {
margin-top: 0px;
margin-bottom: 0px;
}
.header p {
font-weight: 400;
font-size: 200px;
font-family: "Bebas Neue";
color: #FFF;
}
.subheader {
margin-top: 0px;
margin-bottom: 0px;
}
.subheader p {
font-weight: 200;
font-size: 100px;
font-family: "Bebas Neue";
color: #FFF;
}
.bg {
width: 100%;
height: 550px;
background-image: url(../assets/header5.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: bottom;
background-attachment: fixed;
}<!DOCTYPE html>
<html>
<head>
<!-- Meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="bg">
<div id="mainSidenav" class="sidenav">
<div class="sidebar-header">Solebooth</div>
<!--Sidenav Menu-->
<ul class="list-unstyled components">
<li> <a href="#subNav1" data-toggle="collapse" aria-expanded="false">Sneakers</a>
<ul class="collapse list-unstyled" id="subNav1">
<li><a href="#">Adidas</a></li>
<li><a href="#">Nike</a></li>
<li><a href="#">Asics</a></li>
</ul>
</li>
<li> <a href="#subNav2" data-toggle="collapse" aria-expanded="false">Clothing</a>
<ul class="collapse list-unstyled" id="subNav2">
<li><a href="#">Supreme</a></li>
<li><a href="#">Bape</a></li>
<li><a href="#">Palace</a></li>
</ul>
</li>
<li> <a href="#subNav3" data-toggle="collapse" aria-expanded="false">Galley</a>
<ul class="collapse list-unstyled" id="subNav3">
<li><a href="#">#1</a></li>
<li><a href="#">#2</a></li>
<li><a href="#">#3</a></li>
</ul>
</li>
</ul>
</div>
<div id="main">
<nav class="navbar sticky-top">
<form>
<div class="navButton" onclick="navButton(this)">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
</form>
</nav>
<div class="bgConatiner">
<div class="header">
<p>SOLEBOOTH</p>
</div>
<div class="subheader">
<p>Sneakers. Streetwear.</p>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-1"></div>
<div class="col-10"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vestibulum, nunc sit amet egestas mollis, purus lorem rhoncus eros, sit amet molestie lectus nisl in augue. Morbi malesuada erat massa, eu aliquam risus tincidunt ut. Duis pellentesque vestibulum lacus. Nam sed tortor ullamcorper erat bibendum ullamcorper in in elit. Maecenas non est scelerisque, malesuada augue vitae, tristique diam. Maecenas luctus at ante in placerat. Suspendisse nec quam ornare ipsum vestibulum sodales in vitae lacus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vestibulum, nunc sit amet egestas mollis, purus lorem rhoncus eros, sit amet molestie lectus nisl in augue. Morbi malesuada erat massa, eu aliquam risus tincidunt ut. Duis pellentesque vestibulum lacus. Nam sed tortor ullamcorper erat bibendum ullamcorper in in elit. Maecenas non est scelerisque, malesuada augue vitae, tristique diam. Maecenas luctus at ante in placerat. Suspendisse nec quam ornare ipsum vestibulum sodales in vitae lacus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vestibulum, nunc sit amet egestas mollis, purus lorem rhoncus eros, sit amet molestie lectus nisl in augue. Morbi malesuada erat massa, eu aliquam risus tincidunt ut. Duis pellentesque vestibulum lacus. Nam sed tortor ullamcorper erat bibendum ullamcorper in in elit. Maecenas non est scelerisque, malesuada augue vitae, tristique diam. Maecenas luctus at ante in placerat. Suspendisse nec quam ornare ipsum vestibulum sodales in vitae lacus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vestibulum, nunc sit amet egestas mollis, purus lorem rhoncus eros, sit amet molestie lectus nisl in augue. Morbi malesuada erat massa, eu aliquam risus tincidunt ut. Duis pellentesque vestibulum lacus. Nam sed tortor ullamcorper erat bibendum ullamcorper in in elit. Maecenas non est scelerisque, malesuada augue vitae, tristique diam. Maecenas luctus at ante in placerat. Suspendisse nec quam ornare ipsum vestibulum sodales in vitae lacus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vestibulum, nunc sit amet egestas mollis, purus lorem rhoncus eros, sit amet molestie lectus nisl in augue. Morbi malesuada erat massa, eu aliquam risus tincidunt ut. Duis pellentesque vestibulum lacus. Nam sed tortor ullamcorper erat bibendum ullamcorper in in elit. Maecenas non est scelerisque, malesuada augue vitae, tristique diam. Maecenas luctus at ante in placerat. Suspendisse nec quam ornare ipsum vestibulum sodales in vitae lacus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vestibulum, nunc sit amet egestas mollis, purus lorem rhoncus eros, sit amet molestie lectus nisl in augue. Morbi malesuada erat massa, eu aliquam risus tincidunt ut. Duis pellentesque vestibulum lacus. Nam sed tortor ullamcorper erat bibendum ullamcorper in in elit. Maecenas non est scelerisque, malesuada augue vitae, tristique diam. Maecenas luctus at ante in placerat. Suspendisse nec quam ornare ipsum vestibulum sodales in vitae lacus. </div>
<div class="col-1"></div>
</div>
</div>
</div>
</div>
<script>
function openNav() {
document.getElementById("mainSidenav").style.width = "200px";
document.getElementById("main").style.marginLeft = "200px";
}
function closeNav() {
document.getElementById("mainSidenav").style.width = "0";
document.getElementById("main").style.marginLeft = "0";
}
function navButton(x) {
if(x.classList.contains("change")){
closeNav();
x.classList.remove("change");
}else{
openNav();
x.classList.add("change");
}
}
</script>
<!--JavaScript -->
<script src="https://use.fontawesome.com/fdfcf3c386.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
</body>
</html>
答案 0 :(得分：1)
尝试申请
.subheader p, .header p {
margin: 0;
}
您在p - s周围看到如此多空间的原因是应用了用户代理（浏览器）的默认样式。例如，我的浏览器（以及我的浏览器）也适用：
p {
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
}
Em - s相对于元素的字体大小。您的<p> - s的字体大小为100px和200px。所以，这就是为什么你获得这么大的利润。另外，请考虑使用reset.css或normalize.css之类的内容来清除用户代理的样式并减少浏览器的不一致性。