可通过五种方法修改HTML文本行间距:一、内联style设置line-height;二、内部CSS统一控制段落行高;三、外部CSS文件设定全局行高;四、CSS类选择器按需应用;五、利用line-height继承性简化设置。

如果您在HTML中发现文本行与行之间的距离过小或过大,影响阅读体验,则可能是由于默认的行高(line-height)值未按需设置。以下是修改HTML文本行间距的多种方法:
一、使用内联style属性设置line-height
通过直接在HTML标签中添加style属性,可为单个元素快速指定行高值,适用于局部调整。
1、在需要调整行间距的标签中添加style属性,例如<p style="line-height: 1.6;">;
2、将line-height值设为无单位数字(如1.5、2.0),表示相对于当前字体大小的倍数;
立即学习“前端免费学习笔记(深入)”;
3、也可使用带单位的值,例如<p style="line-height: 24px;">或<p style="line-height: 150%;">。
二、使用内部CSS样式表统一控制段落行高
在HTML文档的<head>部分定义<style>块,可集中管理多个同类元素的行高,避免重复书写内联样式。
1、在<head>标签内插入<style>标签;
2、编写CSS规则,例如p { line-height: 1.75; };
3、该规则将作用于页面中所有<p>标签,推荐用于全篇段落统一排版。
三、使用外部CSS文件设定全局行高
将行高样式抽离至独立.css文件,有利于维护和复用,适合多页面项目。
1、新建一个名为style.css的文件,并写入body { line-height: 1.6; }等规则;
2、在HTML文件的<head>中添加<link rel="stylesheet" href="style.css">;
3、确保href路径正确,否则样式不会生效。
四、通过CSS类选择器实现按需应用
定义具有特定行高值的CSS类,再根据内容语义灵活添加到对应元素上,提升样式可控性。
1、在<style>或外部CSS中定义类,例如.text-tight { line-height: 1.2; };
2、在HTML中为需要紧凑行距的段落添加class="text-tight";
3、为需要宽松排版的标题下方说明文字添加class="text-loose"并配套定义line-height: 2.0;
五、利用CSS继承特性简化设置
line-height具有继承性,对父容器设置后,其内部多数文本元素会自动沿用,减少冗余声明。
1、为<body>或<article>等外层容器设置line-height,例如body { line-height: 1.55; };
2、子级的<p>、<span>、<li>等默认继承该值;
3、注意:<h1>–<h6>等标题元素通常有浏览器默认行高,需单独重置。











