在CSS中领先vs行高

Question

因此，在传统的页面布局程序中，当您执行前导时，它不会影响段落的第一行。但是，如果你在CSS中使用line-height，无论你的数字是多少，都会影响第一行。有没有办法模仿CSS中的桌面领先？基本上，我希望只有行高应用于后续行，而不是第一行。

Answer 1

您可以尝试以下方式：

.class {
    line-height: 1.5;
}
.class::first-line {
    line-height: 1;
}

/* If legacy browsers must be supported */
.class:first-line { 
    line-height: 1;
}

https://developer.mozilla.org/en-US/docs/CSS/::first-line

http://reference.sitepoint.com/css/pseudoelement-firstline

Answer 2

我明白了。我可以通过设置负边距来做传统的“领先”，如下所示：

h3 { 
color: #fff;
font-weight: normal;
padding-bottom: 0px;
font-size: 24px;
line-height: 22px;
margin-top:-1px;
}