[英]Removing white space in between elements
刚开始从事网页设计,我就知道基本的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>
现在,许多浏览器都有一个检查工具-查看有问题的元素,查看影响CSS的元素以及盒子模型的内容-填充,大小和位置。
查看您的小提琴,它将是影响该部分顶部的属性(.container),或者是影响导航底部的属性。 对于导航-鉴于黑色背景停止了-如果是那样,这将是一个空白并且不填充。 检查员在提示要素提示它是导航仪的底部时。
似乎有一个.navbar
样式会影响它- margin-bottom: 20px
。 如果删除此选项,则导航和内容之间将不再有空隙。 但是,由于它来自bootstrap min css,因此您需要覆盖它。
您可以在包含引导程序之后添加它:
.navbar {
margin-bottom: 0;
}
修复:在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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.