CSS行内元素line-height问题：能否在段落内修改局部行高？

首先得说清楚问题的根源：当你给父元素（比如p、div、label）设置好line-height后，整个行的高度是由父元素的line-height决定的。直接给内联的span设置line-height之所以看起来无效，是因为内联元素的line-height不会改变行框的整体高度，它只影响自身文本的垂直空间，但视觉上被父元素的行框高度“盖过去了”，所以效果不明显。

下面给你几个能保持文本内联显示的可行方案：

方案1：用vertical-align配合line-height调整 #

给span设置自定义line-height的同时，搭配vertical-align属性，让span的文本在父元素的行框内正确对齐，这样设置的line-height就能直观生效。示例代码：

/* 父元素基础样式 */
p {
  font-size: 16px;
  line-height: 1.8; /* 对应行高约28.8px */
}

/* 内联小字号文本样式 */
p .small-text {
  font-size: 12px;
  line-height: 1.2; /* 自定义span的行高 */
  vertical-align: middle; /* 让span文本与父元素文本垂直居中对齐 */
}

这样span的文本会和其他内容保持在同一行，同时line-height的设置会让文本行高更紧凑或宽松，完全符合你的需求。

方案2：使用inline-block（其实不会强制换行！） #

你提到改成block或inline-block会换行，但其实inline-block是内联块元素，默认会和其他内联元素在同一行显示，不会强制换行（除非父容器宽度不够）。只要搭配vertical-align对齐，就能完美解决line-height无效的问题：

p .small-text {
  font-size: 12px;
  line-height: 1.2;
  display: inline-block;
  vertical-align: baseline; /* 也可以用middle，根据需求调整对齐方式 */
}

如果之前出现换行，大概率是没设置vertical-align导致对齐异常，或者span内容过长超出了父容器宽度，调整对齐方式或容器宽度就能解决。

方案3：用transform: translateY()微调位置 #

如果只是需要小幅度调整内联文本的垂直位置，让它看起来行高更舒服，可以用CSS transform来平移，完全不影响整体布局：

p .small-text {
  font-size: 12px;
  line-height: 1;
  transform: translateY(1px); /* 根据需要调整正负值，向上或向下平移 */
}

这种方法适合只需要细微调整的场景，保持内联显示的同时，能快速让文本位置符合预期。

额外小提示 #

内联元素的line-height作用于自身的内容区，但整个行的高度由行框决定，行框高度等于该行所有内联元素中最高的line-height值。所以当父元素设置了line-height，子内联元素的line-height如果小于父元素，视觉上不会改变行高，但通过对齐方式可以让文本显示更符合你的要求。

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