css中height和line-height区别

关于 CSS 中 height 和 line-height 的区别，我来为您做个详细的讲解。

height 和 line-height 的定义

首先，我们要了解一下 height 和 line-height 的定义：

• height: 元素的高度，设定一个具体数值或百分比，表示元素的高度是多少。
• line-height: 行高，用于指定行内元素行框的高度。

height 和 line-height 的区别

height 和 line-height 的最大区别就是：height 是用来指定高度的，line-height 是用来指定行高的。

下面是两个简单的示例说明：

示例一：高度固定，行高自适应

在如下示例中，我们把一个块级元素的高度设定成了 100px，字体大小为 16px，而行高则没有设定，这时候可以看到，行框的高度就会根据文字内容自适应。

.box{
  height: 100px;
  font-size: 16px;
}

示例二：高度和行高都设定

在如下示例中，我们把一个块级元素的高度设定成了 100px，行高也设定成了 100px，这时候可以看到，行内元素都居中显示了，因为行高等于元素高度。

.box{
  height: 100px;
  line-height: 100px;
}

总结

综上所述，height 和 line-height 在 CSS 中作用不同，height 是用来设定元素高度的，而 line-height 是用来设定行高的。在实际中，我们会根据实际需求选择使用其中的一个或者两者结合使用。