我希望得到一些涉及一些div的问题的帮助。
我正在做一个Udemy课程来重建BBC网站，我已经达到了一些内容，但我们之间存在差距，但是它们之间存在差距。
body {
margin: 0;
padding: 0;
font-family: Helvetica, Arial;}
#topbar {
width: 1050px;
margin: 0 auto;
height: 40px;}
#bbclogo {
margin-top: 8px;
float:left;
margin-right: 10px;}
.topbar-section {
float:left;
border-left: 1px solid #CCCCCC;
height: 100%;}
#signinimage {
margin: 10px 15px;
height: 20px;
float: left;}
#signin-text {
font-weight: bold;
font-size: 14px;
position: relative;
top: 12px;
padding-right: 65px;
}
#signin-div {
float:left;}
#wiggly-line {
height: 40px;
float: left;}
#bello-image {
height: 26px;
margin: 7px 15px 7px 12px;
float: left;}
.topbar-menu {
font-weight: bold;
font-size: 14px;
padding: 13px 13px 0 13px;
height: 27px;}
#more-arrow {
height: 4px;
margin-left: 25px;}
#searchbox {
background-color: #E4E4E4;
border: none;
font-weight: bold;
font-size: 15px;
padding: 5px;
margin: 8px 0 8px 8px;
float: left;}
#magnifying-glass {
margin-top: 8px;
height: 27px;
}
.clear {
clear: both;}
#menu-bar-container {
background-color: #BB1919;
width: 100%;
height: 60px;}
#menu-bar {
width: 1050px;
margin: 0 auto;}
h1 {
margin: 0;
padding: 0;
color: white;
font-size: 40px;
font-weight: normal;
padding-top: 10px;
float: left;}
#local-news {
float: right;
border: 1px solid #BB4545;
width: 175px;
margin: 15px 10px;
padding: 5px 5px 4px 5px;}
#local-news a {
color: white;
text-decoration: none;
font-size: 20px;
position: relative;
top: -2px;}
#local-news:hover {
text-decoration: underline;}
#local-news img {
height: 20px;
padding-left: 10px;}
#menu-bar-container-2 {
width: 100%;
background-color: #A91717;
display: block;}
#menu-bar-2 {
width: 1050px;
margin: 0 auto;
height: 35px;
display: block;}
#menu-bar-2 a {
color: white;
text-decoration: none;
padding: 0 16px;
border-right: 1px solid #BB4545;
font-size: 12px;
position: relative;
top: 9px;
float: left;}<div id="topbar">
<!--white top bar-->
<img id="bbclogo" src="Images\bbclogo.png"/>
<!--left border div with classes-->
<div id="signin-div" class="topbar-section"></div>
<!--Signin image-->
<div id="signin-div">
<img id="signinimage" src="Images\signinimage.png"/>
<span id="signin-text">Sign in</span>
</div>
<!--Bell div-->
<div id="bell-div">
<img id="wiggly-line" src="Images/pointed_line.png"/>
<img id="bello-image" src="Images/bell.png"/>
</div>
<!--Menubar links-->
<div class="topbar-section topbar-menu">
News
</div>
<div class="topbar-section topbar-menu">
Sport
</div>
<div class="topbar-section topbar-menu">
Weather
</div>
<div class="topbar-section topbar-menu">
iPlayer
</div>
<div class="topbar-section topbar-menu">
TV
</div>
<div class="topbar-section topbar-menu">
Radio
</div>
<div class="topbar-section topbar-menu">
More
<img id="more-arrow" src="Images/arrow.png"/>
</div>
<!--Search bar-->
<div class="topbar-section">
<input id="searchbox" type="text" placeholder="Search">
<input type="image" id="magnifying-glass" src="Images/glass.png"/>
</div>
</div>
<!--To clear previous floats-->
<div class="clear"></div>
<!--Menu bar-->
<div id="menu-bar-container">
<div id="menu-bar">
<h1>NEWS</h1>
<div id="local-news">
<a href="">Find local news</a>
<img src="Images/pointer.png">
</div>
</div>
</div>
<!--Menu bar 2-->
<div id="menu-bar-container-2">
<div id="menu-bar-2">
<a href="">Home</a>
<a href="">UK</a>
<a href="">World</a>
<a href="">Business</a>
<a href="">Politics</a>
<a href="">Tech</a>
<a href="">Science</a>
<a href="">Health</a>
<a href="">Education</a>
<a href="">Entertainent & Arts</a>
<a href="">Video & Audio</a>
<a href="">More</a>
</div>
</div>
我尝试过各种各样的事情（改变显示，漂浮，试图清除之前的div ......）但我似乎无法弄清楚问题。我希望能就我的错误提出一些建议。
我在某处读到div之间的空格有时可能是一个问题。这可能是问题吗？
（奇怪的是，当我创建上面的代码片段时，结果窗口中没有显示差距，但是当我在Chrome，IE或Firefox中尝试时，会出现问题）
非常感谢提前
答案 0 :(得分：1)
感谢关于我的问题的建议。
正如我在上一篇评论中提到的那样，div的高度正在创造差距（它不够高）。我认为这是由于另一个元素的填充将下部div向下推，因此当我增加高度时它会使所有内容对齐。
我仍然在学习很多关于网页开发的知识，我对这些回复表示感谢。我确信在此过程中我还会学到更多东西。非常感谢！