html - 谁可以给我解释一下这个？ (HTML CSS)

Question

我现在有 2 个 div，它们很好地相互碰撞。就像它们之间没有空间(垂直)。

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

附注:<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。