CSS line-height 属性详解
一、属性概述
line-height 是 CSS 中用于控制文本行间距（行高） 的属性。它定义了文本行基线之间的最小距离，直接影响文本的可读性和版式美观度。
二、基本语法
selector {
line-height: value;
}三、属性值类型详解
1. 数值类型
| 值类型 | 语法 | 描述 | 计算方式 | 示例 |
|---|---|---|---|---|
| 无单位数字 | 1.5 | 相对于当前字体大小 | 字体大小 × 数值 | line-height: 1.5; |
| 长度单位 | 20px | 固定行高 | 固定像素值 | line-height: 24px; |
| 百分比 | 150% | 相对于当前字体大小 | 字体大小 × 百分比 | line-height: 150%; |
| 关键词 | normal | 浏览器默认值 | 通常为1.2 | line-height: normal; |
2. 具体值说明
| 值 | 描述 | 继承行为 | 推荐场景 |
|---|---|---|---|
normal | 浏览器默认值（约1.2） | 继承计算值 | 重置行高 |
<number> | 无单位数字（如1.5） | 继承数值 | 最佳实践 |
<length> | 固定值（如24px, 1.5em） | 继承计算值 | 精确控制 |
<percentage> | 百分比（如150%） | 继承计算值 | 相对字体大小 |
inherit | 继承父元素 | - | 保持一致性 |
initial | 初始值（normal） | - | 重置样式 |
四、line-height 属性总结表
| 属性 | 描述 | 语法示例 | 计算示例（字体16px） | 继承特性 | 最佳实践 |
|---|---|---|---|---|---|
| 无单位数字 | 相对当前字体大小 | line-height: 1.5; | 16px × 1.5 = 24px | 继承数值 | ✅ 推荐使用 |
| 像素值 | 固定行高 | line-height: 24px; | 固定24px | 继承计算值 | 响应式不友好 |
| em单位 | 相对当前字体大小 | line-height: 1.5em; | 16px × 1.5 = 24px | 继承计算值 | 可能产生意外结果 |
| 百分比 | 相对当前字体大小 | line-height: 150%; | 16px × 150% = 24px | 继承计算值 | 与em类似 |
| normal | 浏览器默认 | line-height: normal; | 约16px × 1.2 = 19.2px | 继承计算值 | 重置样式时使用 |
五、详细行为说明
1. 行盒模型（line box）
┌─────────────────────────────────┐ │ 上间距 │ ├─────────────────────────────────┤ │ 文本内容 │ 行高 = 字体大小 + 上下间距 ├─────────────────────────────────┤ │ 下间距 │ └─────────────────────────────────┘
2. 继承规则对比
/* 父元素 */
.parent {
font-size: 20px;
line-height: 1.5; /* 数值继承 */
}
/* 子元素继承行为 */
.child1 {
font-size: 30px; /* 行高 = 30px × 1.5 = 45px */
}
/* 对比固定值继承 */
.parent-fixed {
font-size: 20px;
line-height: 30px; /* 固定值继承 */
}
.child2 {
font-size: 40px; /* 行高仍为30px，可能太挤！ */
}六、实际应用示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS line-height 属性详解</title>
<style>
:root {
--primary-color: #2c3e50;
--secondary-color: #3498db;
--success-color: #2ecc71;
--warning-color: #f39c12;
--danger-color: #e74c3c;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
color: #333;
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
padding: 20px;
min-height: 100vh;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 40px;
background: white;
border-radius: 20px;
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
}
header {
text-align: center;
margin-bottom: 50px;
padding-bottom: 30px;
border-bottom: 3px solid var(--secondary-color);
}
h1 {
color: var(--primary-color);
font-size: 3rem;
margin-bottom: 15px;
line-height: 1.2;
background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.subtitle {
color: #7f8c8d;
font-size: 1.3rem;
font-weight: 300;
line-height: 1.6;
}
.section {
margin: 50px 0;
padding: 30px;
background: #f8f9fa;
border-radius: 15px;
border-left: 5px solid var(--secondary-color);
}
.section-title {
font-size: 1.8rem;
color: var(--primary-color);
margin-bottom: 25px;
display: flex;
align-items: center;
gap: 12px;
}
.section-title::before {
content: "📏";
font-size: 1.5rem;
}
.demo-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 25px;
margin-top: 20px;
}
.demo-item {
padding: 25px;
border-radius: 10px;
background: white;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
transition: all 0.3s ease;
border-top: 4px solid;
display: flex;
flex-direction: column;
}
.demo-item:hover {
transform: translateY(-5px);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.12);
}
.demo-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
padding-bottom: 15px;
border-bottom: 2px solid #f0f0f0;
}
.demo-name {
font-weight: bold;
font-size: 1.2rem;
color: var(--primary-color);
}
.demo-code {
font-family: 'Consolas', 'Monaco', monospace;
background: #2c3e50;
color: white;
padding: 6px 12px;
border-radius: 6px;
font-size: 0.85rem;
white-space: nowrap;
}
.demo-content {
flex: 1;
font-size: 1rem;
padding: 15px;
background: #f8f9fa;
border-radius: 8px;
border: 1px solid #e9ecef;
overflow: hidden;
position: relative;
}
.demo-content p {
margin: 0;
}
.line-visualization {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
pointer-events: none;
opacity: 0.2;
}
.line-guide {
position: absolute;
left: 0;
right: 0;
height: 1px;
background: var(--accent-color);
}
.value-display {
margin-top: 15px;
padding: 10px;
background: #2c3e50;
color: white;
border-radius: 6px;
font-family: monospace;
font-size: 0.9rem;
text-align: center;
}
/* 不同行高示例 */
.tight-demo { border-top-color: var(--danger-color); }
.normal-demo { border-top-color: var(--warning-color); }
.comfortable-demo { border-top-color: var(--success-color); }
.loose-demo { border-top-color: var(--secondary-color); }
/* 实际行高样式 */
.tight-demo .demo-content { line-height: 1; }
.normal-demo .demo-content { line-height: normal; }
.comfortable-demo .demo-content { line-height: 1.5; }
.loose-demo .demo-content { line-height: 2; }
.comparison-table {
width: 100%;
border-collapse: collapse;
margin: 30px 0;
background: white;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
border-radius: 10px;
overflow: hidden;
}
.comparison-table th {
background: var(--primary-color);
color: white;
padding: 18px;
text-align: left;
font-weight: 600;
font-size: 1.1rem;
}
.comparison-table td {
padding: 15px;
border-bottom: 1px solid #eee;
vertical-align: top;
}
.comparison-table tr:hover {
background: #f8f9fa;
}
.code-block {
background: #1a1a2e;
color: #e6e6e6;
padding: 25px;
border-radius: 10px;
margin: 25px 0;
font-family: 'Fira Code', 'Consolas', monospace;
font-size: 0.95rem;
line-height: 1.6;
overflow-x: auto;
}
.code-comment {
color: #6a9955;
}
.code-property {
color: #9cdcfe;
}
.code-value {
color: #ce9178;
}
.tip-box {
background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
border: 2px solid #2196f3;
color: #1565c0;
padding: 25px;
border-radius: 12px;
margin: 30px 0;
display: flex;
align-items: flex-start;
gap: 20px;
}
.tip-box::before {
content: "💡";
font-size: 2rem;
flex-shrink: 0;
}
.warning-box {
background: linear-gradient(135deg, #ffecb3 0%, #ffd54f 100%);
border: 2px solid #ff9800;
color: #e65100;
padding: 25px;
border-radius: 12px;
margin: 30px 0;
display: flex;
align-items: flex-start;
gap: 20px;
}
.warning-box::before {
content: "⚠️";
font-size: 2rem;
flex-shrink: 0;
}
.visual-demo {
padding: 30px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: 15px;
color: white;
margin: 30px 0;
}
.slider-container {
margin: 25px 0;
}
.slider-label {
display: flex;
justify-content: space-between;
margin-bottom: 10px;
font-weight: bold;
}
.slider {
width: 100%;
height: 8px;
-webkit-appearance: none;
appearance: none;
background: rgba(255, 255, 255, 0.2);
border-radius: 4px;
outline: none;
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 24px;
height: 24px;
border-radius: 50%;
background: white;
cursor: pointer;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}
.interactive-text {
font-size: 1.2rem;
line-height: 1.5;
padding: 20px;
background: rgba(255, 255, 255, 0.1);
border-radius: 8px;
min-height: 120px;
transition: line-height 0.3s ease;
}
.value-display-interactive {
display: flex;
justify-content: space-between;
margin-top: 15px;
font-size: 1.1rem;
font-weight: bold;
}
.use-case-demo {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
margin: 25px 0;
}
.use-case-item {
padding: 20px;
background: white;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.use-case-title {
font-weight: bold;
color: var(--primary-color);
margin-bottom: 15px;
display: flex;
align-items: center;
gap: 8px;
}
.use-case-title::before {
content: "✓";
color: var(--success-color);
font-weight: bold;
}
footer {
text-align: center;
margin-top: 60px;
padding-top: 30px;
border-top: 2px solid #eee;
color: #7f8c8d;
font-size: 0.95rem;
}
@media (max-width: 768px) {
.demo-grid, .use-case-demo {
grid-template-columns: 1fr;
}
.container {
padding: 20px;
}
h1 {
font-size: 2.2rem;
}
.section {
padding: 20px;
}
}
/* 添加行高可视化辅助线 */
.tight-demo .demo-content .line-visualization .line-guide:nth-child(1) { top: 16px; }
.tight-demo .demo-content .line-visualization .line-guide:nth-child(2) { top: 32px; }
.tight-demo .demo-content .line-visualization .line-guide:nth-child(3) { top: 48px; }
.normal-demo .demo-content .line-visualization .line-guide:nth-child(1) { top: 19.2px; }
.normal-demo .demo-content .line-visualization .line-guide:nth-child(2) { top: 38.4px; }
.normal-demo .demo-content .line-visualization .line-guide:nth-child(3) { top: 57.6px; }
.comfortable-demo .demo-content .line-visualization .line-guide:nth-child(1) { top: 24px; }
.comfortable-demo .demo-content .line-visualization .line-guide:nth-child(2) { top: 48px; }
.comfortable-demo .demo-content .line-visualization .line-guide:nth-child(3) { top: 72px; }
.loose-demo .demo-content .line-visualization .line-guide:nth-child(1) { top: 32px; }
.loose-demo .demo-content .line-visualization .line-guide:nth-child(2) { top: 64px; }
.loose-demo .demo-content .line-visualization .line-guide:nth-child(3) { top: 96px; }
</style>
</head>
<body>
<div>
<header>
<h1>CSS line-height 属性详解</h1>
<p>掌握行高设置的艺术，提升文本可读性与版式美感</p>
</header>
<section>
<h2>1. 行高效果对比演示</h2>
<p>font-size: 16px 下的不同行高效果（灰色线为行高辅助线）：</p>
<div>
<!-- 紧凑 -->
<div class="demo-item tight-demo">
<div>
<div>紧凑 (1.0)</div>
<div>line-height: 1;</div>
</div>
<div>
<div>
<div></div>
<div></div>
<div></div>
</div>
<p>行高设置过小会导致文字拥挤，降低可读性。长文本阅读时会感到压抑，字符之间几乎没有呼吸空间。</p>
</div>
<div>计算值: 16px × 1 = 16px</div>
</div>
<!-- 正常 -->
<div class="demo-item normal-demo">
<div>
<div>正常 (normal)</div>
<div>line-height: normal;</div>
</div>
<div>
<div>
<div></div>
<div></div>
<div></div>
</div>
<p>浏览器默认行高通常为1.2左右。适合短文本或标题，但对于长段落阅读可能仍显拥挤。</p>
</div>
<div>计算值: 16px × 1.2 ≈ 19.2px</div>
</div>
<!-- 舒适 -->
<div class="demo-item comfortable-demo">
<div>
<div>舒适 (1.5)</div>
<div>line-height: 1.5;</div>
</div>
<div>
<div>
<div></div>
<div></div>
<div></div>
</div>
<p>这是最常用的行高设置，提供良好的可读性。文本行之间有足够的空间，适合长段落阅读。</p>
</div>
<div>计算值: 16px × 1.5 = 24px</div>
</div>
<!-- 宽松 -->
<div class="demo-item loose-demo">
<div>
<div>宽松 (2.0)</div>
<div>line-height: 2;</div>
</div>
<div>
<div>
<div></div>
<div></div>
<div></div>
</div>
<p>行高过大使文本显得松散，适合诗歌、引文或需要特别强调的短文本。长文本会浪费空间。</p>
</div>
<div>计算值: 16px × 2 = 32px</div>
</div>
</div>
</section>
<section>
<h2>2. 属性值类型对比</h2>
<table>
<thead>
<tr>
<th>值类型</th>
<th>语法示例</th>
<th>继承行为</th>
<th>计算方式 (字体16px)</th>
<th>推荐度</th>
<th>适用场景</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>无单位数字</strong></td>
<td><code>line-height: 1.5;</code></td>
<td>继承数值</td>
<td>16px × 1.5 = 24px</td>
<td>⭐⭐⭐⭐⭐</td>
<td>通用场景，响应式设计</td>
</tr>
<tr>
<td><strong>像素值</strong></td>
<td><code>line-height: 24px;</code></td>
<td>继承计算值</td>
<td>固定24px</td>
<td>⭐⭐⭐</td>
<td>精确控制，固定尺寸设计</td>
</tr>
<tr>
<td><strong>em单位</strong></td>
<td><code>line-height: 1.5em;</code></td>
<td>继承计算值</td>
<td>16px × 1.5 = 24px</td>
<td>⭐⭐⭐</td>
<td>相对父元素字体</td>
</tr>
<tr>
<td><strong>百分比</strong></td>
<td><code>line-height: 150%;</code></td>
<td>继承计算值</td>
<td>16px × 150% = 24px</td>
<td>⭐⭐⭐</td>
<td>相对当前字体</td>
</tr>
<tr>
<td><strong>normal</strong></td>
<td><code>line-height: normal;</code></td>
<td>继承计算值</td>
<td>约19.2px (1.2倍)</td>
<td>⭐⭐⭐⭐</td>
<td>重置样式，使用默认值</td>
</tr>
</tbody>
</table>
<div>
<div>
<strong>专业提示：</strong> 始终优先使用<strong>无单位数字</strong>作为line-height的值。这样无论子元素的字体大小如何变化，行高都会按比例自动调整，确保排版的一致性。
</div>
</div>
</section>
<section>
<h2>3. 交互式行高调节器</h2>
<div>
<h3 style="color: white; margin-bottom: 20px;">实时调节行高</h3>
<div>
<div>
<span>行高值:</span>
<span id="lineHeightValue">1.5</span>
</div>
<input type="range" min="0.8" max="3" step="0.1" value="1.5" id="lineHeightSlider">
</div>
<div id="interactiveText">
这是一个交互式演示，您可以通过上方的滑块调节行高值。观察文本行间距的变化，感受不同行高对阅读体验的影响。合适的行高能够显著提升文本的可读性和美观度。
</div>
<div>
<span>当前行高: <strong id="currentValue">1.5</strong></span>
<span>计算值: <strong id="calculatedValue">24px</strong></span>
</div>
</div>
<script>
const slider = document.getElementById('lineHeightSlider');
const valueDisplay = document.getElementById('lineHeightValue');
const interactiveText = document.getElementById('interactiveText');
const currentValue = document.getElementById('currentValue');
const calculatedValue = document.getElementById('calculatedValue');
slider.addEventListener('input', function() {
const value = parseFloat(this.value);
valueDisplay.textContent = value.toFixed(1);
currentValue.textContent = value.toFixed(1);
// 更新文本行高
interactiveText.style.lineHeight = value;
// 计算像素值（假设字体大小为16px）
const fontSize = 16;
const pixelValue = Math.round(fontSize * value);
calculatedValue.textContent = `${pixelValue}px`;
});
// 初始化
slider.dispatchEvent(new Event('input'));
</script>
</section>
<section>
<h2>4. 继承行为演示</h2>
<div>
<span>/* 场景1: 无单位数字的继承（推荐） */</span>
<span>.parent</span> {
<span>font-size</span>: <span>16px</span>;
<span>line-height</span>: <span>1.5</span>; <span>/* 继承数值 1.5 */</span>
}
<span>.child</span> {
<span>font-size</span>: <span>24px</span>;
<span>/* 计算: 24px × 1.5 = 36px */</span>
}
<span>/* 场景2: 固定像素值的继承（不推荐） */</span>
<span>.parent-fixed</span> {
<span>font-size</span>: <span>16px</span>;
<span>line-height</span>: <span>24px</span>; <span>/* 继承计算值 24px */</span>
}
<span>.child-fixed</span> {
<span>font-size</span>: <span>32px</span>;
<span>/* 问题: 行高仍然是24px，可能太拥挤！ */</span>
}
<span>/* 场景3: 百分比值的继承 */</span>
<span>.parent-percent</span> {
<span>font-size</span>: <span>16px</span>;
<span>line-height</span>: <span>150%</span>; <span>/* 继承计算值 24px */</span>
}
<span>.child-percent</span> {
<span>font-size</span>: <span>24px</span>;
<span>/* 问题: 行高仍然是24px，不是期望的36px */</span>
}
</div>
<div>
<div>
<div>继承对比示例</div>
<div style="font-size: 16px; line-height: 1.5; margin-bottom: 15px; padding: 10px; background: #f0f0f0;">
父元素: 16px, line-height: 1.5
<div style="font-size: 24px; margin-top: 10px; padding: 10px; background: #e3f2fd;">
子元素: 24px, 自动计算为36px ✓
</div>
</div>
</div>
<div>
<div>固定值问题</div>
<div style="font-size: 16px; line-height: 24px; margin-bottom: 15px; padding: 10px; background: #f0f0f0;">
父元素: 16px, line-height: 24px
<div style="font-size: 32px; margin-top: 10px; padding: 10px; background: #ffebee;">
子元素: 32px, 但行高仍是24px ✗
</div>
</div>
</div>
</div>
</section>
<section>
<h2>5. 实际应用场景</h2>
<div>
<div>
<div>正文内容 (1.5-1.8)</div>
<div style="font-size: 16px; line-height: 1.6;">
这是正文内容的理想行高。提供了良好的可读性，适合长段落阅读。研究表明，1.5-1.8的行高范围最有利于提高阅读速度和理解度。
</div>
</div>
<div>
<div>标题文字 (1.1-1.3)</div>
<div style="font-size: 24px; line-height: 1.2; font-weight: bold; color: var(--primary-color);">
标题适合较小的行高
保持紧凑的视觉效果
</div>
</div>
<div>
<div>代码块 (1.4-1.6)</div>
<div style="font-family: monospace; font-size: 14px; line-height: 1.5; background: #2c3e50; color: white; padding: 15px; border-radius: 6px;">
function calculate(a, b) {<br>
return a + b;<br>
}
</div>
</div>
<div>
<div>移动端优化 (稍大)</div>
<div style="font-size: 18px; line-height: 1.7;">
移动设备上建议使用稍大的行高，因为触摸屏上手指可能会遮挡文字。1.6-1.8的范围通常效果最佳。
</div>
</div>
</div>
<div>
<span>/* 响应式行高设置最佳实践 */</span>
<span>:root</span> {
<span>/* 定义行高变量 */</span>
<span>--line-height-tight</span>: <span>1.2</span>;
<span>--line-height-normal</span>: <span>1.5</span>;
<span>--line-height-loose</span>: <span>1.8</span>;
}
<span>body</span> {
<span>line-height</span>: <span>var(--line-height-normal)</span>;
}
<span>h1, h2, h3</span> {
<span>line-height</span>: <span>var(--line-height-tight)</span>;
}
<span>.article-content</span> {
<span>line-height</span>: <span>var(--line-height-normal)</span>;
}
<span>/* 移动端优化 */</span>
<span>@media</span> (<span>max-width</span>: <span>768px</span>) {
<span>.article-content</span> {
<span>line-height</span>: <span>var(--line-height-loose)</span>;
}
}
<span>/* 代码块特殊处理 */</span>
<span>pre, code</span> {
<span>line-height</span>: <span>1.5</span>;
<span>font-family</span>: <span>'Fira Code', monospace</span>;
}
</div>
</section>
<section>
<h2>6. 注意事项与最佳实践</h2>
<div>
<div>
<strong>重要注意事项：</strong>
<ul style="margin-top: 10px; padding-left: 20px;">
<li><strong>继承陷阱：</strong>固定值（px）和百分比在继承时可能产生意外结果</li>
<li><strong>垂直居中：</strong>line-height 可用于单行文本垂直居中（值等于容器高度）</li>
<li><strong>负值无效：</strong>line-height 不能为负值，浏览器会忽略负值设置</li>
<li><strong>字体影响：</strong>不同字体的推荐行高可能不同，需要实际测试</li>
<li><strong>与vertical-align的关系：</strong>line-height 影响行内元素的垂直对齐基线</li>
</ul>
</div>
</div>
<div>
<div>
<strong>最佳实践指南：</strong>
<ol style="margin-top: 10px; padding-left: 20px;">
<li><strong>优先使用无单位数字：</strong>如1.5，确保响应式设计的兼容性</li>
<li><strong>建立行高系统：</strong>使用CSS变量定义一致的行高比例</li>
<li><strong>测试实际效果：</strong>在不同设备和字体大小下测试行高的可读性</li>
<li><strong>考虑字体特性：</strong>衬线字体通常需要比无衬线字体更大的行高</li>
<li><strong>移动端优化：</strong>为移动设备设置稍大的行高（增加0.1-0.2）</li>
<li><strong>垂直居中技巧：</strong>单行文本垂直居中：<code>line-height: 容器高度;</code></li>
</ol>
</div>
</div>
<div>
<span>/* 1. 单行文本垂直居中 */</span>
<span>.center-single-line</span> {
<span>height</span>: <span>60px</span>;
<span>line-height</span>: <span>60px</span>; <span>/* 等于容器高度 */</span>
}
<span>/* 2. 多行文本垂直居中（使用flexbox） */</span>
<span>.center-multi-line</span> {
<span>display</span>: <span>flex</span>;
<span>align-items</span>: <span>center</span>;
<span>min-height</span>: <span>100px</span>;
}
<span>/* 3. 根据字体调整行高 */</span>
<span>.serif-font</span> {
<span>font-family</span>: <span>Georgia, serif</span>;
<span>line-height</span>: <span>1.6</span>; <span>/* 衬线字体需要更大行高 */</span>
}
<span>.sans-serif-font</span> {
<span>font-family</span>: <span>Arial, sans-serif</span>;
<span>line-height</span>: <span>1.5</span>;
}
<span>/* 4. 避免行高冲突 */</span>
<span>.reset-line-height</span> {
<span>line-height</span>: <span>normal</span>; <span>/* 重置为默认值 */</span>
}
</div>
</section>
<section>
<h2>7. 高级技巧与常见问题</h2>
<div>
<div>
<div>问题：行内块元素对齐</div>
<div style="font-size: 16px; line-height: 1.5;">
文本基线
<span style="display: inline-block; width: 50px; height: 50px; background: var(--secondary-color); vertical-align: middle;"></span>
继续文本
</div>
<p style="font-size: 0.9rem; margin-top: 10px;">行内块元素可能破坏行高计算，需要调整vertical-align</p>
</div>
<div>
<div>技巧：CSS自定义属性</div>
<div style="font-size: 16px; line-height: var(--custom-lh, 1.5);">
动态行高演示
</div>
<p style="font-size: 0.9rem; margin-top: 10px;">
<code>--custom-lh: 2;</code>
</p>
</div>
<div>
<div>问题：混合字体大小</div>
<div style="font-size: 16px; line-height: 1.5;">
正常文本
<span style="font-size: 24px;">大号文字</span>
正常文本
</div>
<p style="font-size: 0.9rem; margin-top: 10px;">不同字体大小在同一行时可能影响整体行高</p>
</div>
<div>
<div>技巧：最小行高</div>
<div style="font-size: 16px; line-height: 1.5; min-height: calc(1.5em * 3);">
确保至少显示3行的高度
</div>
</div>
</div>
<div>
<span>/* 1. 处理行内块元素的对齐问题 */</span>
<span>.inline-block-element</span> {
<span>display</span>: <span>inline-block</span>;
<span>vertical-align</span>: <span>middle</span>;
<span>margin</span>: <span>-2px 0</span>; <span>/* 微调对齐 */</span>
}
<span>/* 2. 动态调整行高 */</span>
<span>.dynamic-line-height</span> {
<span>line-height</span>: <span>clamp(1.4, 2vw, 1.8)</span>;
<span>/* 响应式行高：最小1.4，根据视口变化，最大1.8 */</span>
}
<span>/* 3. 处理混合字体大小 */</span>
<span>.mixed-font-sizes</span> {
<span>line-height</span>: <span>1.5</span>;
}
<span>.mixed-font-sizes .large-text</span> {
<span>font-size</span>: <span>1.5em</span>;
<span>vertical-align</span>: <span>middle</span>;
<span>line-height</span>: <span>1</span>; <span>/* 重置内部行高 */</span>
}
<span>/* 4. 确保多行文本容器高度 */</span>
<span>.multi-line-container</span> {
<span>font-size</span>: <span>1rem</span>;
<span>line-height</span>: <span>1.5</span>;
<span>min-height</span>: <span>calc(1.5em * 3)</span>; <span>/* 至少3行高度 */</span>
}
</div>
</section>
<footer>
<p>CSS line-height 属性详解 | 最后更新: 2024年</p>
<p>提示：合适的行高是良好排版的基础，直接影响用户体验和内容可读性</p>
</footer>
</div>
</body>
</html>七、专业排版建议
1. 黄金比例行高
/* 基于字体大小计算理想行高 */
:root {
--font-size: 16px;
--line-height-ratio: 1.618; /* 黄金比例 */
--line-height: calc(var(--font-size) * var(--line-height-ratio));
}
body {
font-size: var(--font-size);
line-height: var(--line-height-ratio); /* 使用无单位数字 */
}2. 模块化比例系统
/* 建立类型比例系统 */
:root {
--ratio: 1.25; /* 次要第三度比例 */
--font-size-sm: calc(1rem / var(--ratio));
--font-size-base: 1rem;
--font-size-lg: calc(1rem * var(--ratio));
--line-height-sm: 1.4;
--line-height-base: 1.6;
--line-height-lg: 1.8;
}
.small-text {
font-size: var(--font-size-sm);
line-height: var(--line-height-sm);
}
.base-text {
font-size: var(--font-size-base);
line-height: var(--line-height-base);
}
.large-text {
font-size: var(--font-size-lg);
line-height: var(--line-height-lg);
}3. 响应式行高调整
/* 根据断点调整行高 */
.article {
line-height: 1.5; /* 基础值 */
}
@media (min-width: 768px) {
.article {
line-height: 1.6; /* 桌面端稍大 */
}
}
@media (min-width: 1200px) {
.article {
line-height: 1.7; /* 大屏幕更大行高 */
max-width: 65ch; /* 理想行长度 */
}
}八、常见问题解决方案
问题1：行内元素破坏行高
/* 解决方案：调整vertical-align */
.icon {
display: inline-block;
vertical-align: middle;
width: 1em;
height: 1em;
margin: -0.125em 0; /* 微调对齐 */
}问题2：表单元素行高不一致
/* 统一表单元素行高 */
input, textarea, button, select {
line-height: 1.5; /* 与正文一致 */
font-size: 1rem;
font-family: inherit; /* 继承字体 */
}问题3：多语言文本支持
/* 为不同语言设置合适行高 */
:lang(zh) { /* 中文 */
line-height: 1.8;
}
:lang(ja) { /* 日文 */
line-height: 1.7;
}
:lang(en) { /* 英文 */
line-height: 1.5;
}
:lang(ar) { /* 阿拉伯文（RTL） */
line-height: 1.8;
direction: rtl;
}问题4：打印样式优化
@media print {
body {
line-height: 1.6; /* 打印时稍大行高 */
font-size: 12pt; /* 打印标准字号 */
}
/* 避免分页时切断行 */
p, h1, h2, h3 {
page-break-inside: avoid;
}
}九、性能与可访问性
性能考虑
line-height是轻量级属性，渲染性能影响极小复杂计算（如嵌套百分比）可能增加计算成本
避免过度使用动态计算值
可访问性建议
WCAG 2.1标准：行高至少为字体大小的1.5倍（Success Criterion 1.4.12）
对比度考虑：适当行高可改善文本与背景的对比度感知
阅读障碍友好：增大行高可帮助阅读障碍用户
缩放兼容：使用无单位数字确保用户缩放时行高保持比例
测试工具
/* 开发时添加辅助线 */
.debug-lines::before {
content: '';
position: absolute;
left: 0;
right: 0;
background-image: repeating-linear-gradient(
to bottom,
transparent,
transparent calc(1lh - 1px),
rgba(255, 0, 0, 0.1) calc(1lh - 1px),
rgba(255, 0, 0, 0.1) 1lh
);
pointer-events: none;
height: 100%;
}十、总结要点
优先使用无单位数字：确保响应式兼容性和正确继承
建立行高系统：使用CSS变量保持一致性
考虑使用场景：正文、标题、代码等需要不同行高
测试实际效果：在不同设备、字体和语言环境下测试
遵循可访问性标准：确保最小行高为1.5倍字体大小
垂直居中技巧：单行文本可使用
line-height = 容器高度
十一、现代布局中的行高
1. 与Flexbox/Grid配合
.card {
display: grid;
grid-template-rows: auto 1fr auto;
gap: 1lh; /* 使用行高单位 */
}
.card-content {
line-height: 1.6;
/* Grid会自动处理垂直空间分配 */
}2. 使用lh单位（CSS新增）
.container {
font-size: 16px;
line-height: 1.5;
padding: 0.5lh; /* 使用行高单位 */
margin-bottom: 1lh;
}
/* lh = 当前元素的line-height计算值 */
/* rlh = 根元素的line-height计算值 */3. 容器查询中的行高
@container (min-width: 400px) {
.component {
line-height: 1.6; /* 容器变宽时增大行高 */
}
}line-height 是排版中最重要的属性之一，直接影响文本的可读性和美观度。正确理解和应用 line-height 可以显著提升用户体验，创建专业、优雅的版面设计。记住：好的排版是隐形的，只有当它出错时才会被注意到。