CSS如何调整段落自动折行后多行文本的垂直间距

你代码中给p标签设置的margin: 10px 0仅能控制不同段落之间的上下间距，对单个<p>元素内部因宽度限制自动折行生成的多行文本无效，这类行内折行的垂直间距需要通过line-height（行高）属性调整。

具体修改方式 #

直接在你要调整的目标段落的CSS规则中添加line-height属性即可，针对你当前的代码，只需要修改.test类的样式：

.test {
  text-align: left;
  text-indent: 2em;
  /* 控制折行行间距，数值越大间距越宽 */
  line-height: 1.6;
}

line-height取值说明 #

• 优先使用无单位数值（比如1.5、1.7、2）：行高会基于当前元素的字体大小按比例自动计算，适配性最好，不会出现子元素继承行高错乱的问题
• 也可使用固定长度值（比如24px、1.5rem）：直接指定固定行高，适合需要精准控制间距的场景
• 不推荐使用百分比值设置行高，继承场景下容易出现行高显示异常

注意区分两类间距控制属性：

• line-height：仅控制单个段落内部折行生成的多行文本之间的垂直间距
• margin/padding：控制段落和其他相邻元素（星级图标、日期、署名段落等）之间的间距

内容的提问来源于stack exchange，提问作者Kevin Casey