div之間的HTML / CSS水平空白

Question

我想擺脫兩個html節之間的空白。 這是一張照片：

根據搜索結果，我在/ div和div之間的html代碼中刪除了所有空格，但似乎無法解決問題。

HTML代碼：

<!--website main heading layout-->
<div id="heading">
    <h1> Beat Your Pace <h1/>
    <h2> The music search tool to boost your running performance! </h2>
</div><div id="topbar">

<!--topbar/menu layout-->
    <div id="topbar_wrapper">
        <ul id="mainmenu">
            <li><a href="#">Home</a></li><li>
            <a href="#">Search</a></li><li>
            <a href="#">Sort By &#9660</a>
                <ul id="sortmenu">
                    <li><a href='#'>Song</a>
                        <ul class="sortsubmenu">
                            <li><a href='#'>A to Z</a></li><li>
                            <a href='#'>Z to A</a></li>
                        </ul>
                    </li><li>   
                    <a href='#'>Artist</a>
                        <ul class="sortsubmenu">
                            <li><a href='#'>A to Z</a></li><li>
                            <a href='#'>Z to A</a></li>
                        </ul>
                    </li><li>
                    <a href='#'>Album</a>
                        <ul class="sortsubmenu">
                            <li><a href='#'>A to Z</a></li><li>
                            <a href='#'>Z to A</a></li>
                        </ul>
                    </li><li>   
                    <a href='#'>Genre</a>
                        <ul class="sortsubmenu">
                            <li><a href='#'>A to Z</a></li><li>
                            <a href='#'>Z to A</a></li>
                        </ul>
                    </li><li>
                    <a href='#'>BPM</a>
                        <ul class="sortsubmenu">
                            <li><a href='#'>Slowest to Fastest</a></li><li>
                            <a href='#'>Fastest to Slowest</a></li>
                        </ul>
                    </li><li>
                    <a href='#'>Release Date</a>
                        <ul class="sortsubmenu">
                            <li><a href='#'>Newest to Oldest</a></li><li>
                            <a href='#'>Oldest to Newest</a></li>
                        </ul>
                    </li>
                </ul>
            </li><li>
            <a href="#">Add Song</a></li><li>
            <a href="#">Contact Us</a></li>
        </ul>
    </div>
</div>

正文和標題CSS代碼：

html, body {
margin: 0px;
padding: 0px;
font-family: Arial;
font-size: 18px;
}
#heading {
background: url("http://cdn4.techlila.com/wp-    content/uploads/2011/01/header2.jpg");
background-position: left;
color: black;
text-shadow: -1px 0 #F8F8FF, 0 1px #F8F8FF, 1px 0 #F8F8FF, 0 -1px #F8F8FF;
}

菜單CSS代碼：

#topbar {
background-color: #222;
}
#topbar_wrapper {
width: 100%;
margin: 0 auto;
text-align: left;
}





#mainmenu {
list-style-type: none;
padding: 0px;
margin: 0px;
position: relative;
min-width: 200px;
}
#mainmenu > li {
display: inline-block;
width: 200px;
}
#mainmenu li:hover {
background-color: #333;
}
#mainmenu li a{
color: #CCC;
display: block;
padding: 15px;
text-decoration: none;
}
#mainmenu li:hover > ul {
display: block;
}





#sortmenu {
display: none;
position: absolute;
background-color: #333;
border: 5px solid #222;
border-top: 0;
margin-left: -5px;
}
#sortmenu > li {
display: block;
position: relative;
}
#sortmenu li a:hover {
color: #699;
}
#sortmenu li: hover ul {
display: inline-block;
}





.sortsubmenu {
display: none;
position: absolute;
background-color: #333;
border: 5px solid #222;
border-left: 0px;
text-align: right;
top: 0;
left: 100%;
width: auto;
}

.sortsubmenu li{
display: inline;
white-space: nowrap;
}

.sortsubmenu li a:hover {
color: #DB7093;
}

Answer 1

刪除<h2>元素上的默認設置：

#heading h2 {
    margin:0;
}