<h1>中行之间的距离太小：文本重叠</h1>

Question

我有<h1>我使用以下CSS设置了样式：

#col2 h1 {
    text-align: left;
    padding: 2.5%;
    margin-top: 0;
    margin-bottom: 0;
    width: 95%;
    background-color: #444;
    border-bottom: solid 1px black;
    cursor: pointer;

    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

出于某种原因，文本如下：

我首先猜测这可能是因为我设置了margin:0;，但当我将其更改为2.5%时，线条之间的距离保持不变，并且在顶部出现间隙深灰色区域。

Answer 1

指定line-height：

h1 {
    line-height: 1.4em; /* or whatever... */
}

虽然在你发布的CSS中没有什么可以导致这个问题，所以我建议使用浏览器的开发人员工具（在大多数浏览器中 F12 ）来检查line-height是什么来自，或来自被覆盖的地方。

顺便说一句，块级元素的margin存在于元素形成的'box'的外边缘周围，它对包含的文本行之间的间距没有影响> 那个元素。

Answer 2

line-height:10px; 

尝试增加行高