删除元素之间的空白

Question

Just got in to web design, I know basic HTML and CSS and I am trying to create a standard home page just to increase my skills and knowledge.

I have created a standard nav bar and my next step is to create a hero box with an image underneath the nav bar. I am using a section tag to achieve this, however there is a gap between the nav bar and the section and I am not sure how to remove this. Below is the link, any advice would be greatly appreciated.

<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

Many browsers now have an inspect tool - to look at the element in question, see what CSS is effecting it, and what the box model - it's padding, size and positioning.

Looking at your fiddle, it's going to either be a property effecting the top of section, .container, or a property affecting the bottom of nav. For nav - given that the black background stops - it would be a margin and not padding if it is that. The inspector when hightlighting elements suggests it is the bottom of the nav.

It appears that there is a .navbar style effecting it - which has margin-bottom: 20px . If you remove this - you will no longer have a gap between the nav and your content. However, since it comes from the bootstrap min css - you'll need to override it.

You can add this after the bootstrap inclusion to do so:

.navbar {
  margin-bottom: 0;
}

Answer 2

Fix: Add a class .nav-bar-custom in navbar because you can use multiple navbar and use custom css againist this navbar's main 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>