具有单行和多行项目的CSS行高

Question

我有像这样的行作为h2

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

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

Answer 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。填充也是一样。

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

快乐编码：）

Answer 2

将&--dropdown { list-style: none; position: absolute; width: 25rem; height: 14rem; background-color: $color-additional; overflow: hidden; &-item { position: relative; width: 34rem; padding: 1rem 0 1rem 2rem; transition: all ease 0.2s; &:not(:first-of-type) { border-top: 1px solid $color-navigation-border; } &:hover { background-color: $color-white; border-left: 5px solid $color-primary; } &-link { color: $color-black; text-decoration: none; } } } 更改为>>> template = 'interfaces.jinja2' >>> template.split('.') ，将>>> template.split('.')[0] 更改为min-height，并在顶部和底部填充