标题和段落之间的行高答案

【问题标题】：Line high between heading and paragraph标题和段落之间的行高
【发布时间】：2017-02-05 19:58:48
【问题描述】：

我的标题重叠的问题。这里是example。我知道问题在于设置为 0 的行高：

h3 {
line-height:0;
letter-spacing:1px;
}

如果我使用line high:1，问题就消失了，但是标题和段落之间的空间变得太大，页面看起来不太好。

所以我想做的是将行高：1 用于标题，行高：0 用于标题和段落之间的空间。

我希望有人有解决方案。

谢谢！

【问题讨论】：

标签： css heading

【解决方案1】：

只需将大约5px 的margin-bottom 添加到您的h3 标题

p {
margin:0; 
padding:0; 
line-height:1em;
}

h3 {
line-height:1;
letter-spacing:1px;
margin-bottom: 5px;
}

<h3>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</h3>
<p style="text-align: justify;">Lorem ipsum dolor sit amet, consetetur sadipscing elitr,  sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr,  sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
<br>
<h3>Ut wisi enim ad minim veniam</h3>
<p style="text-align: justify;">Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>

【讨论】：

【解决方案2】：

我在您的 JSFiddle 示例中尝试了这个，看起来就像您想要的那样：

h3 {
    line-height:1; /* put 1 here */
    letter-spacing:1px;
    margin-bottom:0px; /* add this line */
}

【讨论】：

感谢您的回复！