应通过合理设置CSS的line-height与margin来优化HTML文字行距和段落间距，具体方法包括内联样式、内部style标签、CSS类名、浏览器重置及CSS变量五种方式。
如果您在编写HTML页面时发现文字行距过密或段落间距不协调，影响阅读体验，则可能是由于CSS行高（line-height）与段落外边距（margin）未合理设置。以下是调整HTML行距与段距的具体操作方法：
一、使用内联style属性直接设置line-height和margin
该方法适用于单个元素的快速样式调试，无需外部CSS文件，通过直接在标签中嵌入样式控制文本垂直间距。
1、在<p>标签中添加style属性，写入line-height值，例如：<p style="line-height: 1.6;">这是一段正文</p>。
2、为同一<p>标签追加margin-top与margin-bottom，如：<p style="line-height: 1.6; margin-top: 12px; margin-bottom: 18px;">这是一段正文</p>。
立即学习“前端免费学习笔记（深入）”；
3、若需统一控制多行文本行距，可在<span>或<div>中嵌套文本并设置line-height，注意line-height单位推荐使用无单位数值（如1.5），避免继承异常。
二、通过内部style标签定义全局文本间距规则
该方法适用于单一HTML文件内多个段落的样式统一管理，将样式集中声明于<head>区域的<style>块中，提升可维护性。
1、在HTML文档<head>部分插入<style></style>标签。
2、在<style>内写入p选择器，设定line-height与margin，例如：
<style>
p { line-height: 1.75; margin: 16px 0; }
</style>
3、若需区分标题与正文，可单独定义h2、p等标签的间距，确保h2的margin-bottom与p的margin-top不叠加导致过大空白。
三、利用CSS类名实现按需调用的间距组合
该方法支持语义化复用，通过预设不同间距级别的类名（如text-tight、text-loose、para-spaced），在HTML元素中灵活调用。
1、在<style>中定义多个类，例如：
.text-normal { line-height: 1.5; margin: 14px 0; }
.text-relaxed { line-height: 1.8; margin: 20px 0; }
2、在<p>标签中添加对应class，如：<p class="text-relaxed">这段文字行距宽松，段距较大</p>。
3、若某段需取消默认段距，可定义.reset-margin { margin: 0 !important; }，注意!important仅在必要覆盖场景下使用，避免样式冲突失控。
四、通过CSS重置基础行高与段距以消除浏览器默认差异
不同浏览器对<p>、<h1>–<h6>等元素内置了不同margin和line-height值，直接覆盖可确保跨浏览器显示一致。
1、在<style>顶部添加通用重置规则：
* { margin: 0; padding: 0; }
body { line-height: 1.5; }
2、单独重置段落间距：
p { margin: 1rem 0; line-height: 1.6; }
3、针对列表项或引用块等特殊文本容器，也应显式声明line-height与margin，避免依赖浏览器默认值造成排版错位。
五、使用CSS自定义属性（CSS变量）动态控制间距层级
该方法适用于需要响应式调节或主题切换的场景，通过定义变量集中管理行距与段距数值，便于后期批量修改。
1、在:root伪类中声明变量：
:root {
--base-line-height: 1.6;
--para-margin: 1.2rem;
}
2、在具体选择器中引用变量：
p { line-height: var(--base-line-height); margin: var(--para-margin) 0; }
3、若需适配移动端，可在媒体查询中重新赋值：
@media (max-width: 768px) {
:root { --para-margin: 0.8rem; }
}
