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

Question

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

我尝试将 <meta name="viewport" content="width=device-width, initial-scale=1"> 添加到每个 this answer 的 header。我目前使用的 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 单位。它以 html.

的 font-size 的 1.5 倍计算

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

所以在 html 规则中将其更改为 line-height: 1.5; 将修复它。

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

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

How do I correct overlapping spacing error in CSS when it wraps text?

html

css

font-size