如何在不增加边距的情况下更改换行div文本的行高？

Question

我正在尝试在div中为文本添加行高，这样当文本在移动视图中换行时，它可以与我的边距一致。具体地说，是版权div文本。

<div class='footer-section'>Company logo</div>
<div class="footer-section copyright">Copyright &copy; {{ year }}. All Rights Reserved.</div>
<div class='footer-section'>Bottom Element</div>

这是一张文本换行的图像。橙色框的边距为15px。我正试着把“版权2020，所有权利”这一行从“保留”中去掉。线路

​

​

当我将line-height添加到div时，在元素的下方和上方添加了空格，从而创建了额外的空格。将line-height设置为200%时，会在橙色框和版权文本之间的边距上创建额外的空间，您可以在公司徽标文本下看到该边距

​

​

我一直在寻找一种方法来增加换行文本之间的行高，而不会给元素增加额外的边距。我尝试了display属性、行高和垂直对齐，但似乎没有得到想要的结果。我希望在换行文本之间有间距，但不超过15px的页边距(橙色框)和文本之间的额外间距

以下是一些样式

.footer-section + .footer-section {
    margin-top: 15px;
}

.footer-section.copyright {
    line-height: 200%;
}

如果仍然不清楚，这是一个图表:绿色箭头是我想要实现的，版权文本之间的间距，这是一行环绕，因为这是移动视图将如何显示给用户。红色箭头是设置line-height属性时添加的额外空格，我不希望这样做

​

​

Answer 1

.footer-section:not(.footer-section.copyright ) {
    margin-top: 15px;
    line-height: 100%;
}

.footer-section.copyright {
    line-height: 200%;
}

如果我没弄错的话，您希望将line-height属性仅应用于版权文本，在这种情况下，这可能会起作用。也是codepen：https://codepen.io/flyingDonut/pen/BaKRxNd

Answer 2

对于你的要求来说，这有点棘手，因为它不完全清楚你想要什么。然而；

如果你给你的行添加行高，它的作用很简单，它基本上是在那行文本的顶部和底部添加边距，并将文本垂直居中到下一行。

我想你想要的是：

.footer-section.copyright {padding-top: 1rem;} // 1 rem is by default 16px