换行时如何纠正 CSS 中的重叠间距错误？

Question

现在，当我移动到移动设置时，就会发生这种情况。如何更正？

我尝试将<meta name="viewport" content="width=device-width, initial-scale=1"> 添加到每个this answer 的标题中。我目前使用的 CSS 如下所示：

html {  
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: #61666c;
    line-height: 1.5em;
    border-top: 10px solid #ECEEF1;
    border-bottom: 10px solid #ECEEF1;
    -webkit-text-size-adjust: none;
}

h1 {
    font-size: 40px;
    font-weight: 300;
}

Answer 1

问题在于您在html 规则中的line-height 被硬编码为特定值，因为您使用em 单位。它以font-size 的html 的1.5 倍计算。

如果您希望单位与每个元素的当前font-size 相关，则不应提供单位。

因此将html 规则中的它更改为line-height: 1.5; 将修复它。

---

所以它继承得很好，但是你将它设置为 16px 的 1.5（通常的默认值）所以它是 24px。然后你将h1 的font-size 设置为40px，这比24px 稍微多一点..