我正在尝试复制 BBC 新闻网站，但我遇到了这个奇怪的样式问题。这是图像。
我总是在我的两个 div 之间找到这个差距。这是我使用的代码。不知道我应该如何摆脱那个空间。尝试将边距和填充设置为 0 但这没有用。
这是代码：
body{
margin: 0;
padding: 0;
font-family: Helvetica, Arial, sans-serif;
}
#topbar{
height: 40px;
width: 1000px;
margin: 0 auto;
background-color: #FFFFFF;
}
#logo{
float: left;
margin-top: 8px;
margin-right: 8px;
}
.topbarsections{
float:left;
border-left: 1px #CCCCCC solid;
height: 100%;
}
#signin-image{
float: left;
width: 30px;
margin-top: 7px;
margin-left: 8px;
}
#signin-text{
float: left;
font-weight: bold;
font-size: 90%;
color: #333333;
position: relative;
top: 13px;
padding-right: 80px;
}
.topbar-menu{
float: left;
font-weight: bold;
color: #333333;
font-size: 90%;
padding: 13px 15px 0 15px;
height: 27px;
}
#more-arrow{
height: 13px;
margin-left: 15px;
}
#search-box{
background-color: #E4E4E4;
margin: 8px 0 0 10px;
border: none;
font-weight: bold;
font-size: 14px;
padding: 5px;
width: 140px;
float: left
}
#magnifying-glass{
margin-top: 8px;
height: 26px;
}
.clear{
margin: 0;
padding: 0;
}
#news-bar{
background-color: #BB1919;
width: 100%;
height: 70px;
}
#inner-news-bar{
background-color: #BB1919;
margin: 0 auto;
width: 1200px;
height: 70px;
}
#news-bar h1{
color: white;
margin: 0;
padding: 10px;
font-weight: normal;
font-size: 45px;
}
#menu-bar{
background-color: #A91717;
width: 100%;
height: 35px;
}
#inner-menu-bar{
background-color: #A91717;
width: 1200px;
height: 35px;
margin: 0 auto;
}
.menu-bar-sections{
float: left;
border-right: 1px solid #BB4545;
padding-left: 10px;
padding-right:8px;
position: relative;
top: -5px;
}
.menu-bar-sections a{
float:left;
color: white;
text-decoration: none;
}
.menu-bar-sections a:hover{
text-decoration: underline;
}
#menu-bar-more-section{
border-right: none !important;
}
#down-arrow{
float: left;
height: 13px;
position: relative;
top: 2px;
margin-left: 2px;
}
#page-container{
width: 1200px;
margin: 0 auto;
}
h2{
}<body>
<div id="topbar">
<img id="logo" src="images/bbclogo.png">
<div id="signin-div" class="topbarsections">
<img src="images/singin.PNG" id="signin-image">
<span id="signin-text">Sign in</span>
</div>
<div class="topbarsections topbar-menu">
News
</div>
<div class="topbarsections topbar-menu">
Sports
</div>
<div class="topbarsections topbar-menu">
Weather
</div>
<div class="topbarsections topbar-menu">
Shop
</div>
<div class="topbarsections topbar-menu">
Earth
</div>
<div class="topbarsections topbar-menu">
Travel
</div>
<div class="topbarsections topbar-menu">
More
<img id="more-arrow"src="images/more-arrow.PNG">
</div>
<div class="topbarsections">
<input id="search-box" type="text" placeholder="Search">
<input type="image" id="magnifying-glass" src="images/glass.PNG">
</div>
</div>
<div class="clear"></div>
<div id="news-bar">
<div id="inner-news-bar">
<h1>NEWS</h1>
</div>
</div>
<div class="clear"></div>
<div id="menu-bar">
<div id="inner-menu-bar">
<p class="menu-bar-sections"><a href="">Home</a></p>
<p class="menu-bar-sections"><a href="">Video</a></p>
<p class="menu-bar-sections"><a href="">World</a></p>
<p class="menu-bar-sections"><a href="">US & Canada</a></p>
<p class="menu-bar-sections"><a href="">UK</a></p>
<p class="menu-bar-sections"><a href="">Business</a></p>
<p class="menu-bar-sections"><a href="">Tech</a></p>
<p class="menu-bar-sections"><a href="">Science</a></p>
<p class="menu-bar-sections"><a href="">Stories</a></p>
<p class="menu-bar-sections"><a href="">Entertainment & Arts</a></p>
<p class="menu-bar-sections"><a href="">Health</a></p>
<p class="menu-bar-sections" id="menu-bar-more-section"><a href="">More</a><img src="images/down-arrow.PNG" id="down-arrow"></p>
</div>
</div>
<div class="clear"></div>
<div id="page-container">
<div id="main-article">
<h2>Technology</h2>
</div>
</div>
</body>如果“间隙”是指标题“技术”上方的空间，@Olivier Krull 是正确的：这是h2标题的默认边距。
您可以简单地添加此 CSS 规则将其设置为零：
#main-article > h2:first-child {
margin-top: 0;
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句