css不写高度写行高

CSS 不写高度写行高
当我们写 CSS 时，常常需要设置一个元素的高度、宽度等属性。但有时元素的高度是动态变化的，或者我们不想设置固定的高度，那么该怎么做呢？
这时，我们可以考虑使用行高（line-height）来代替高度属性。行高是指每行文本的高度，可以用百分比或具体数值来表示。设置行高后，元素的高度会自动适应文本内容。
比如下面的代码：

<p style="line-height: 1.5;">这是一个段落，行高为 1.5 倍。</p> 

设置了行高后，这个段落的高度会根据文本内容自动调整。即使文本内容换行了，段落也能自适应高度，避免了设置固定高度所带来的局限性。
另一个好处是，使用行高可以使文本在垂直方向上居中对齐。比如下面的代码：

<p style="line-height: 2; height: 50px; background-color: #eee; text-align: center;">
  这是一个居中对齐的段落，高度为固定值。
</p> 

设置了固定高度和行高后，文本就能在垂直方向上居中对齐了。如果用高度来实现同样的效果，就必须知道其中的文本内容和字体大小，才能精确地设置高度值，较为繁琐。
还有一个要注意的地方是，行高是影响一行文本的高度，并不是每个字符的高度。所以如果字体大小不同，行高也应该随之调整。通常，行高设置为字体大小的 1.5-2 倍比较合适。
总的来说，使用行高可以避免设置固定高度的限制，同时使文本在垂直方向上居中对齐，还能提高页面的可维护性。因此，我们在写 CSS 时，可以灵活运用行高这个属性。