是什么造成了2个DIV之间的差距

Question

在this page，我有以下内容：

＆＃13;

＆＃13;

body {background-image: url(images/bg-page.jpg); background-size: cover; repeat: no-repeat;}
#selector {list-style: none; max-width: 1322px; margin: 0 auto; padding-left: 0; -webkit-padding-start: 0; margin-bottom: 0;}
#selector li {display: inline-block; width: 11.625%; margin-right: 0.75%; margin-top: 1%; background-color: #012F60; height: 70px; display: inline-table; vertical-align: top}
#selector li:last-child {margin-right: 0%}
#selector li#job.active {background-color: #93CB32;}
#selector li#help.active {background-color: green;}
#selector li#ndis.active {background-color: blue;}
#selector li#training.active {background-color: purple;}
#selector li#injured.active {background-color: orange;}
#selector li#refer.active {background-color: yellow;}
#selector li#psych.active {background-color: aqua;}
#selector li#employer.active {background-color: black;}
#selector li a {color: white; text-align: center; vertical-align: middle; display: table-cell; text-decoration: none;}
#selection {max-width: 1322px; margin: 0 auto; margin-top: 0;}
#div-job, #div-help, #div-ndis, #div-training, #div-injured, #div-refer, #div-psych, #div-employer {text-align: center; color: white;}
#div-job {background-color: #93CB32;}
#div-help {background-color: green;}
#div-ndis {background-color: blue;}
#div-training {background-color: purple;}
#div-injured {background-color: orange;}
#div-refer {background-color: yellow;}
#div-psych {background-color: aqua;}
#div-employer {background-color: black;}

＆＃13;

<div id="page">
	
    <ul id="selector">
    	<li id="job" class="active"><a href="#">I want to find a job</a></li>
        <li id="help"><a href="#">I need help at work</a></li>
        <li id="ndis"><a href="#">NDIS</a></li>
        <li id="training"><a href="#">I need training</a></li>
        <li id="injured"><a href="#">I've been injured at work</a></li>
        <li id="refer"><a href="#">I want to refer</a></li>
        <li id="psych"><a href="#">Psych service</a></li>
        <li id="employer"><a href="#">I'm an employer</a></li>
    </ul>
    <div id="selection">
        <div id="div-job">
            <h2>Looking for a job?</h2>
            <h3>Let us know what suits you, make your selection below</h3>
            <select>DES for employers (recruitment)</select>
        </div>
    </div>

</div>

＆＃13;

＆＃13;

＆＃13;

为什么水平列表和它下面的div之间存在差距？

我看不到填充或边距。

#selector有margin-bottom：0，#selection和margin-top：0。

Answer 1

这是h2内#div-help元素周围的余量。

Answer 2

它引起H2标记的边距。

在h2标记中添加margin-top:0;，它将解决问题。