我的div之间无法解释的差距

时间:2017-12-02 00:40:11

标签: html css

我正在尝试复制BBC新闻网站,我有这个奇怪的样式问题。 Here is the image.

我总是在两个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>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:1)

如果通过&#34; gap&#34;你的意思是标题上方的空格&#34;技术&#34;,@ Olivier Krull是对的:它是h2标题的默认边距。

您只需添加此CSS规则即可将其设置为零:

#main-article > h2:first-child {
  margin-top: 0;
}