css设置行间距的方法

通过line-height属性设置CSS行间距，可取值为数值、长度单位、百分比或normal；推荐使用无单位数值以确保良好继承性，避免文字重叠并提升响应式设计中的可读性。

在CSS中设置行间距主要通过 line-height 属性来实现，它控制文本行与行之间的垂直间距。这个属性适用于大多数包含文本的元素，比如 p、div、span、h1-h6 等。

使用 line-height 设置行间距

line-height 可以接受多种类型的值：

• 数值（如 1.5）：最推荐的方式，表示当前字体大小的倍数，具有良好的继承性。
• 长度单位（如 20px、1.5em）：指定具体的间距大小，px 是固定值，em 相对于当前字体大小。
• 百分比（如 150%）：相对于当前元素字体大小计算。
• normal：默认值，由浏览器决定，通常约为字体大小的 1.0 到 1.2 倍。

示例：

p {
  line-height: 1.6;    /* 推荐：字体大小的1.6倍 */
}
<p>h1 {
line-height: 30px;   /<em> 固定行高 </em>/
}</p><p>.text {
line-height: 150%;   /<em> 百分比形式 </em>/
}</p>

line-height 的继承机制

当 line-height 使用数值时，子元素会基于自身的字体大小重新计算行高，这是推荐做法。如果使用固定单位如 px，子元素将继承该具体值，可能导致排版不协调。

KGOGOMALL

主要功能：无限级分类，可自由调整分类位置，商品可在各分类间自由转移； 商品组合：可以为每种商品添加多种选项，方便顾客购买选择，比如：一件衣服顾客可以选择款式、花色、大小等，笔记本电脑，可以有cpu、内存、显示屏、硬盘等等扩展属性； 会员分级功能，会员积分功能。可根据会员积分自行设定用户组，管理员可自行定义会员获得积分的方式：按订单总金额或者按单个商品给予积分； 按照商品类别查看热卖、特价，允

0 查看详情

例如：

body {
  font-size: 16px;
  line-height: 1.5; /* 子元素会按自身字体大小 × 1.5 计算 */
}

注意事项

• 避免使用过小的 line-height，会导致文字重叠，影响可读性。
• 在移动端或响应式设计中，建议使用无单位数值，适应不同屏幕字体大小。
• line-height 也可以用于垂直居中单行文本，将其设为与容器高度相同即可。

基本上就这些，合理使用 line-height 能显著提升文本的阅读体验。不复杂但容易忽略细节。

以上就是css设置行间距的方法的详细内容，更多请关注其它相关文章！