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>

Link

Answer 1

许多浏览器现在都有一个检查工具 - 查看有问题的元素，看看CSS正在影响它，以及框模型 - 它的填充，大小和位置。

看着你的小提琴，它将成为影响截面顶部的属性，.container或影响导航底部的属性。对于导航 - 假设黑色背景停止 - 它将是一个边距而不是填充，如果是这样的话。检查员在高亮显示元素时表明它是导航的底部。

似乎有一种影响它的.navbar样式 - 具有margin-bottom: 20px。如果删除此功能 - 导航和内容之间将不再存在间隙。但是，因为它来自bootstrap min css - 你需要覆盖它。

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

.navbar {
  margin-bottom: 0;
}

Answer 2

修复：在导航栏中添加课程.nav-bar-custom，因为您可以使用多个导航栏并使用自定义css重新导航此导航栏的主导航。 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>

删除元素之间的空白区域

2 个答案: