带有单行项目和多行项目的 CSS 行高答案

【问题标题】：CSS line-height with single and multi line item带有单行项目和多行项目的 CSS 行高
【发布时间】：2019-11-30 13:22:27
【问题描述】：

我有像这些项目这样的行作为 h2

height: auto;
min-height: 50px;
line-height: 50px;

但如果我有一个多行 h2，它看起来很糟糕。如果 h2 的多行是 30px 而不是 50，我该如何降低它的行高？

【问题讨论】：

【解决方案1】：

好吧。如果你想增加行间距，可以使用line-height。

它用于定义元素内行框的最小高度，但这就是事情。如果您将其放在h2 元素上，它将应用于您网页或网站上的每个h2 元素。

这里有一些解决方案可供考虑。

如果您想要更大的元素line-height，您可以给该元素一个特定的类并为该类定义line-height，并且当您需要line-height 时，只需将类添加到元素。这样，您将重用类并减少编写 CSS。

如果你想增加元素之间的空间，你可以通过两种方式做到这一点。边距和填充。这些真的很简单。

如果你想将元素向下推，你可以给它margin-top: 10px 或margin-bottom: 10px 给它上面的元素，或者如果你有 3 个元素（就像你的情况一样），你可以给

margin-top: 10px;
margin-bottom: 10px;

到中间元素，它会将顶部和底部元素推开 10px。填充也是如此。

在编程中有很多方法可以实现相同的目标。首先，坐下来想想什么是最容易编写但可读且可扩展的。

编码愉快:)

【讨论】：

【解决方案2】：

将 min-height 更改为 30 和 line-height 更改为 30 并带有顶部和底部填充

【讨论】：