CSS不明のマージン/パディング

私は小さなプロジェクトで作業していますが、問題が発生しました。 bgContainerクラスには2ビットのテキストがあり、それらの間にマージンがありますが、マージンは必要ありませんが、マージンがどこから来ているのかはわかりません。クロムによると、見出しのテキストの余白は200ピクセルですが、私が知っている限り、私のCSSではどこに置いても問題ありません。私はまた、ブートストラップ4ベータ2を使用しています。CSS不明のマージン/パディング

padding/margin

@charset "UTF-8"; 
 

 
.sidenav { 
 
    height: 100%; 
 
    width: 0; 
 
    position: fixed; 
 
\t overflow-y: auto; 
 
    z-index: 1; 
 
    top: 0; 
 
    left: 0; 
 
\t font-family: 'Helvetica Neue', Gotham, Helvetica, Arial, 'sans-serif'; 
 
\t font-weight: 200; 
 
\t font-size: 1em; 
 
    background-color: #e9ecef; 
 
    overflow-x: hidden; 
 
    padding-top: 60px; 
 
    transition: 0.5s; 
 
} 
 

 
.sidenav .sidebar-header { 
 
\t font-family: "Bebas Neue"; 
 
\t font-size: 2em; 
 
\t font-weight: 600; 
 
    padding: 0 20px; 
 
} 
 

 
.sidenav ul.components { 
 
    padding: 10px 0; 
 
} 
 

 
.sidenav ul p { 
 
    color: #fff; 
 
    padding: 5px 10px; 
 
} 
 

 
.sidenav ul li a { 
 
\t color: #5C5C5C; 
 
\t text-decoration: none; 
 
    padding: 5px 10px; 
 
    display: block; 
 

 
} 
 

 
.sidenav ul li a:hover { 
 
    color: #5C5C5C; 
 
    background: #fff; 
 
\t transform: scale(1.01); 
 
} 
 

 
.sidenav ul li.active { 
 
\t color: #e9ecef; 
 
} 
 

 
.sidenav ul li.current > a { 
 
\t color: #e9ecef; 
 
\t 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; 
 
\t right: 20px; 
 
\t top: 7px; 
 
    font-family: FontAwesome; 
 
    font-size: 0.8em; 
 
\t 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 { 
 
\t 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 { 
 
\t padding: 20px; 
 
\t vertical-align: middle; 
 
\t height: 510px; 
 
\t margin-top: 0px; 
 
\t margin-bottom: 0px; 
 
} 
 

 
.header { 
 
\t margin-top: 0px; 
 
\t margin-bottom: 0px; 
 
} 
 
.header p { 
 
\t font-weight: 400; 
 
\t font-size: 200px; 
 
\t font-family: "Bebas Neue"; 
 
\t color: #FFF; 
 
} 
 
.subheader { 
 
\t margin-top: 0px; 
 
\t margin-bottom: 0px; 
 
} 
 
.subheader p { 
 
\t font-weight: 200; 
 
\t font-size: 100px; 
 
\t font-family: "Bebas Neue"; 
 
\t color: #FFF; 
 
} 
 

 
.bg { 
 
\t width: 100%; 
 
    height: 550px; 
 
\t background-image: url(../assets/header5.jpg); 
 
\t background-repeat: no-repeat; 
 
\t background-size: cover; 
 
\t background-position: bottom; 
 
\t 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> 
 
\t \t 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"); 
 
    } 
 
} 
 
\t </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>

出典

2017-10-22 Ben Naylor

最終結果の画像をアップロードできますか？ – jstoobz

あなたの質問にbgContainerがありますが、あなたのCSSとHTMLの両方がbgConatinerを使用しています。どちらですか？ – Rob

あなたp -sの周りにはあまりスペースを参照してください理由は、そのユーザー・エージェントの（ブラウザの）デフォルトで

.subheader p, .header p { 
    margin: 0; 
}

を適用しようスタイルが適用されます。例えば、私のブラウザ（とあなただけでなく、私が思う）が適用されます。

p { 
    -webkit-margin-before: 1em; 
    -webkit-margin-after: 1em; 
}

Em -sは、要素のフォントサイズを基準にしています。 <p> -sのフォントサイズは100pxと200pxです。だからこそ、大きなマージンを得るのです。 reset.cssまたはnormalize.cssのようなものを使用して、ユーザーエージェントのスタイルを消去し、ブラウザーの矛盾を減らすことも検討してください。

出典

2017-10-22 21:45:22 curveball

CSS不明のマージン/パディング

答えて

関連する問題