html - div 元素之间的间隙

Question

我希望在涉及一些 div 的问题上得到一些帮助。

我正在参加 Udemy 类(class)以重新创建 BBC 网站，我已经到了这样的地步:我有一些包含内容的 div，但它们之间存在差距。

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>

我试过各种操作(更改显示、 float 、尝试清除以前的 div...)，但我似乎无法找出问题所在。我希望就我做错了什么提出一些建议。

我在某处读到 div 之间的空白有时会成为一个问题。这可能是问题所在吗？

(奇怪的是，当我创建上面的代码片段时，差距并没有显示在结果窗口中，但是当我在 Chrome、IE 或 Firefox 中尝试时，问题出现了)

提前致谢

Answer 1

感谢您对我的问题提出的建议。

正如我在上一条评论中提到的，造成差距的是 div 的高度(它不够高)。我认为这是由于另一个元素的填充将较低的 div 向下推，所以当我增加高度时它使所有内容对齐。

我仍在学习很多关于 Web 开发的知识，非常感谢您的回复。我相信我会在这个过程中学到更多。非常感谢!