具有单个和多个订单项的CSS行高

Question

我正在将像h2这样的行作为行

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

但是如果我有多行h2，它看起来太糟糕了。如果h2的多行为30px而不是50px，如何减小h2的行高？

Answer 1

将顶部和底部的填充从min-height更改为30，将line-height更改为30

Answer 2

好吧。如果要增加行间距，可以使用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。填充也一样。

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

快乐编码：）