谁可以给我解释一下这个？ （HTML CSS）

Question

我现在有2个div，它们很好地碰到了彼此。就像它们之间没有空间（垂直）。

现在我面对这个奇怪的问题，当我从我的<h1> yoga 2 pro</h1>元素更改字体时，它会在我的2个div之间创建一个空格，我必须使用margin-top: -10px;解决这个问题但是我认为这个不是干净的方式。

PS：<h1>确实适合div，并且它没有显示在div之外。

任何人都知道什么是错的？

.navmenu
{
    background-color:#2c2c2c;
    height: 60px;
    width:100%;
    margin-top: -14px;
}
        
.mainmenu
{
    padding-top: 20px;
}

.mainmenu ul
{
    list-style-type: none;
    margin: 0;
    padding: 0;    
}
        
.mainmenu li
{
    display: inline; 
    padding-left: 20px;
}
        
.midden
{
    margin-left: 1.5%;
    width: 97%;
    height: 450px;
    background-color: white;
}
        
.midden img
{
    float:left;
}
        
.midden h1
{
    color:black;
    font-size: 75px;
}

<div class="navmenu">
    <ul class="mainmenu">
        <li>laptops en Ultrabooks</li>
        <li>Tablets</li>
        <li>Dekstops en alles-in-een computers</li>
        <li>Werkstations</li>
        <li>Servers en opslag</li>
        <li>Accessoires</li>
        <li>Aanbiedingen</li>
        <li>Diensten en garanties</li>
        <li>Waar verkrijgbaar</li>
    </ul>
</div>
<div class="midden">
    <img src="images/laptop.png">
    <h1>Yoga 2 pro</h1>
</div>

Answer 1

将margin: 0 X X X;添加到您的h1标记或添加margin-top: 0px

第一个语句中的X分别为margin-right，margin-bottom，margin-left。

Answer 2

备选方案，您可以使用float: left到h1元素：

.navmenu {
    background-color:#2c2c2c;
    height: 60px;
    width:100%;
    margin-top: -14px;
}
.mainmenu {
    padding-top: 20px;
}
.mainmenu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.mainmenu li {
    display: inline;
    padding-left: 20px;
}
.midden {
    margin-left: 1.5%;
    width: 97%;
    height: 450px;
    background-color: white;
    position: relative;
    top: 10px;
}
.midden img {
    float:left;
}
.midden h1 {
    color:black;
    font-size: 75px;
    position: relative;
    float: left;
}

<div class="navmenu">
    <ul class="mainmenu">
        <li>laptops en Ultrabooks</li>
        <li>Tablets</li>
        <li>Dekstops en alles-in-een computers</li>
        <li>Werkstations</li>
        <li>Servers en opslag</li>
        <li>Accessoires</li>
        <li>Aanbiedingen</li>
        <li>Diensten en garanties</li>
        <li>Waar verkrijgbaar</li>
    </ul>
</div>
<div class="midden">
    <img src="http://revolution52.net/wp-content/uploads/2009/07/blue-grunge-200x200.jpg">
     <h1>Yoga 2 pro</h1>

</div>