【CSS中line-height与height的区别】在使用CSS进行网页布局时，`line-height` 和 `height` 是两个常被混淆的属性。虽然它们都与文本的垂直空间有关，但实际作用和应用场景却大不相同。以下是对这两个属性的详细对比总结。
一、基本概念
- `height`：用于设置元素的高度，包括内容区域和内边距（padding），但不包括外边距（margin）。
- `line-height`：用于设置行间距，即一行文字的基线到下一行基线之间的距离，通常用来控制文本的垂直对齐方式。
二、主要区别总结
| 属性 | 定义 | 作用对象 | 是否影响文本对齐 | 是否影响元素高度 | 是否可继承 |
| `height` | 设置元素的总高度 | 所有块级元素 | 否 | 是 | 否 |
| `line-height` | 设置行间距，影响文本垂直对齐 | 文本内容 | 是 | 否 | 是 |
三、具体应用场景
1. `height` 的使用场景：
- 当你需要精确控制一个容器的高度时，例如按钮、卡片等。
- 在需要固定高度的布局中，如导航栏、侧边栏等。
2. `line-height` 的使用场景：
- 当你希望文本在容器中垂直居中时，可以通过设置 `line-height` 等于容器的 `height` 来实现。
- 调整段落或列表项的行间距，提升可读性。
四、注意事项
- `line-height` 只影响文本的行间距，不会改变整个元素的高度。
- 如果你只设置了 `line-height` 而没有设置 `height`，元素的高度会根据内容自动调整。
- 使用 `line-height` 实现垂直居中时，需确保父元素有明确的 `height` 值。
五、示例代码
```css
/ 示例：通过 line-height 实现文本垂直居中 /
.container {
height: 100px;
line-height: 100px;
text-align: center;
}
/ 示例：设置元素高度 /
.box {
height: 200px;
padding: 20px;
}
```
六、总结
`height` 和 `line-height` 虽然都与“高度”相关，但它们的作用对象和功能完全不同。理解两者的区别有助于更精准地控制页面布局和文本样式，避免常见的布局错误。在实际开发中，合理使用这两个属性可以显著提升用户体验和页面美观度。
