标题和段落之间的高线

Question

我的标题重叠了。这里有一个example。我知道问题是设置为 0 的高线：

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

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

所以我想做的是在标题和段落之间为标题设置 high:1 行，在 space 行设置 high:0 行。

希望大家有解决办法。

谢谢！

Answer 1

只需将 margin-bottom 左右 5px 添加到您的 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>

Answer 2

我在你的 JSFiddle 示例中试过这个，它似乎是你想要的：

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

标题和段落之间的高线

Line high between heading and paragraph

css

heading