CSS中的leading与line-height有何区别？

Question

在传统的页面设计程序中，当您进行行距调整时，不会影响段落的第一行。然而，如果您在CSS中使用行高，无论您设置的数字是多少，都会影响到第一行。有没有办法在CSS中模仿桌面版的行距？基本上，我希望只对后续行应用行高，而不是第一行。

- Matt Brown

---

我最终使用了负边距顶部的方法，成功解决了我的问题。 - Matt Brown

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

- Ryan

---

虽然这很有趣，而且它确实停止了第一行的移动，但结果看起来相当糟糕。第一行和第二行现在更接近了。 - hooleyhoop

那个第一行的东西很有帮助。谢谢。 - Matt Brown

Answer 2

我想通了。我可以通过设置负的 margin-top 来实现传统的“首行缩进”，就像这样：

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

- Matt Brown

---

只有当段落的第一行遵循标题时，此方法才能解决问题；如果该标题下是第二个或更多的段落，则此解决方案将无效。然而，这是一个权宜之计，如果由于某种原因无法使用::first-line，则可以使用此方法。 - Canned Man