刪除元素之間的空白

Question

剛開始從事網頁設計，我就知道基本的HTML和CSS，並且我試圖創建一個標准的主頁只是為了增加我的技能和知識。

我已經創建了一個標准的導航欄，下一步是創建一個帶有導航欄下方圖像的英雄框。 我正在使用section標簽來實現此目的，但是導航欄和該部分之間存在間隙，我不確定如何刪除它。 以下是鏈接，任何建議將不勝感激。

<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>

鏈接

Answer 1

現在，許多瀏覽器都有一個檢查工具-查看有問題的元素，查看影響CSS的元素以及盒子模型的內容-填充，大小和位置。

查看您的小提琴，它將是影響該部分頂部的屬性（.container），或者是影響導航底部的屬性。 對於導航-鑒於黑色背景停止了-如果是那樣，這將是一個空白並且不填充。 檢查員在提示​​要素提示它是導航儀的底部時。

似乎有一個.navbar樣式會影響它- margin-bottom: 20px 。 如果刪除此選項，則導航和內容之間將不再有空隙。 但是，由於它來自bootstrap min css，因此您需要覆蓋它。

您可以在包含引導程序之后添加它：

.navbar {
  margin-bottom: 0;
}

Answer 2

修復：在navbar中添加一個類.nav-bar-custom ，因為您可以使用多個navbar並再次使用自定義css對該navbar的主nav進行操作 。 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{ list-style: none; display: inline-block; padding-right: 20px; padding-top: 5px; 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>