要素間の空白を削除する

Question

Webデザインに入ったので、私は基本的なHTMLとCSSを知っています。私は自分のスキルと知識を高めるために標準ホームページを作成しようとしています。

私は標準のナビゲーションバーを作成しました。次のステップは、ナビゲーションバーの下にイメージを持つヒーローボックスを作成することです。私はこれを達成するためにセクションタグを使用していますが、ナビゲーションバーとセクションの間にギャップがあり、これを削除する方法がわかりません。以下はリンクですが、どんなアドバイスも大歓迎です。問題の要素を見て、それを達成されたものをCSS見るとどのようなボックスモデル - -

<nav class="navbar navbar-inverse"> 
      <div class="container"> 
       <ul class="main-nav navbar-right"> 
        <li> 
         <a href="#">Home</a> 
        </li> 
        <li> 
         <a href="#">Contact Us</a> 
        </li> 
        <li> 
        <a href="#">About Us</a> 
        </li> 
       </ul> 
      </div> 
     </nav> 

     <section> 
      <div class="container"> 
       section 1 
      </div> 
     </section> 

Link

Answer 1

修正：あなたが複数のナビゲーションバーを使用して、このナビゲーションバーのメインナビゲーション againistカスタムCSSを使用することができますので、ナビゲーションバーでクラス.nav-bar-customを追加。 ul.main-nav{margin-bottom:0px;}

/* Latest compiled and minified CSS included as External Resource*/ 
 

 
/* Optional theme */ 
 
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css'); 
 
.nav-bar-custom ul.main-nav{margin-bottom:0px;} 
 
.main-nav li{ 
 
\t list-style: none; 
 
\t display: inline-block; 
 
\t padding-right: 20px; 
 
\t padding-top: 5px; 
 
\t font-size: 20px; 
 
} 
 

 
.main-nav a{ 
 
    text-decoration: none; 
 
    color: #fff; 
 
} 
 

 
section{ 
 
    background-color: #808080; 
 
    margin-top: 0; 
 
}

<nav class="navbar navbar-inverse nav-bar-custom"> 
 
    <div class="container"> 
 
     <ul class="main-nav navbar-right"> 
 
      <li><a href="#">Home</a></li> 
 
      <li><a href="#">Contact Us</a></li> 
 
      <li><a href="#">About Us</a></li> 
 
     </ul> 
 
    </div> 
 
</nav> 
 

 
<section> 
 
    <div class="container">section 1</div> 
 
</section>

Answer 2

多くのブラウザは現在、検査ツールを持っている、それはパディング、サイズと位置です。

あなたのフィドルを見ると、セクションの上部、.container、またはnavの下部に影響を与えるプロパティのいずれかになります。 navの場合、黒い背景が止まっているので、マージンになります。要素を強調表示すると、インスペクタはナビゲーションの一番下にあることを示します。

.navbarのスタイルがあります。これはmargin-bottom: 20pxです。これを削除すると、ナビとあなたのコンテンツの間に隙間がなくなります。しかし、それはブートストラップmin cssから来ているので、あなたはそれを上書きする必要があります。

あなたがそうするように、ブートストラップインクルージョン後にこれを追加することができます。

.navbar { 
    margin-bottom: 0; 
}