如何实现不同响应式字号文本间间距一致且紧密贴合？

问题根源：默认情况下，浏览器会给文本元素设置基于字号的默认行高（line-height），块级元素的行高会产生上下额外空间，导致不同字号的文本块之间出现不均匀的间隙。

以下是几种可行的解决方法：

方法1：Flex布局 #

通过Flex布局让子元素垂直排列，并设置子元素的行高为1，彻底消除行高带来的间隙：

<div style="display: flex; flex-direction: column;">
  <div style="font-size:2vw; line-height: 1;">test</div>
  <div style="font-size:10vw; line-height: 1;">test2</div>
  <div style="font-size:3vw; line-height: 1;">test3</div>
</div>

方法2：Inline-block + 垂直对齐 #

将子元素改为行内块元素，设置垂直对齐方式为顶部，同时消除元素间的空格，并设置行高为1：

<div style="font-size: 0;">
  <div style="font-size:2vw; line-height: 1; display: inline-block; vertical-align: top;">test</div><!--
  --><div style="font-size:10vw; line-height: 1; display: inline-block; vertical-align: top;">test2</div><!--
  --><div style="font-size:3vw; line-height: 1; display: inline-block; vertical-align: top;">test3</div>
</div>

方法3：Grid布局 #

Grid布局默认行间距为0，配合行高为1的设置，可实现文本紧贴：

<div style="display: grid;">
  <div style="font-size:2vw; line-height: 1;">test</div>
  <div style="font-size:10vw; line-height: 1;">test2</div>
  <div style="font-size:3vw; line-height: 1;">test3</div>
</div>

核心思路：通过设置line-height: 1消除文本本身的行高空间，再利用布局方式确保文本块之间无额外间距，无论调整容器尺寸，文本都能保持紧贴状态。

内容的提问来源于stack exchange，提问作者mr.work