html5设置行距样式_line-height属性控制行高【教程】

HTML5中可通过line-height属性控制文本行高，支持像素值、无单位数值、百分比、em单位及内联样式五种方法，分别适用于精确排版、响应式缩放、比例计算等不同场景。

如果您在HTML5中编写文本内容，发现文字行与行之间过于紧凑或过于松散，则可能是由于未正确设置行高。以下是使用line-height属性控制行高的具体方法：

一、使用像素值设置固定行高

通过指定具体的像素数值，可为元素内的文本行设定统一且固定的垂直间距，适用于需要精确控制排版的场景。

1、在CSS样式表中选中目标文本元素，例如p标签或p容器。

2、添加line-height属性，并赋值为具体像素数，如line-height: 24px;

立即学习“前端免费学习笔记（深入）”；

3、确保该CSS规则被正确加载并应用到对应HTML元素上。

二、使用无单位数值设置相对行高

采用无单位数字作为line-height的值时，浏览器会将该数值与当前字体大小相乘，得出实际行高，从而保持缩放一致性。

1、在CSS中为文本元素设置font-size，例如font-size: 16px;

2、紧接着设置line-height为纯数字，如line-height: 1.5;

3、此时实际行高为16px × 1.5 = 24px，且子元素继承该倍率而非固定像素值。

三、使用百分比值设置行高

百分比形式的line-height值同样基于当前元素的font-size计算，其行为与无单位数值一致，但语法上以%表示。

1、为包含文本的HTML元素定义font-size，例如font-size: 14px;

标签： html5 css html 浏览器 css样式 html元素