通过设置 `line-height: 1` 可显著压缩 `` 或 `

` 元素的上下空白，使文字紧贴边界，解决字体渲染导致的视觉冗余高度问题。

在网页排版中，即使设置了 margin: 0 和 padding: 0，标题文字（尤其是大字号自定义字体）仍常出现顶部和底部“意外留白”——这是因为浏览器默认为内联元素（如 ）或块级标题（如

）分配了基于字体度量（ascent/descent、line gap）的 line-height。该值通常大于 1（如 1.2–1.4），导致实际占用高度远超文字本身视觉高度。

根本解决方案是显式重置行高：

.text-title {   font-family: 'Thick Thinks', sans-serif;   font-weight: bold;   color: #303030;   font-size: 17vw;   line-height: 1; /* ? 关键：消除行内基线间距 */   margin: 0;   padding: 0;   user-select: none; }

同时建议优化结构与样式层级：

• 避免嵌套无语义的 在
  

  内（除非需局部样式），直接对

  应用 line-height: 1 更简洁；

• 将 .title 容器设为 display: inline-block（而非默认 block），可使其宽度精准包裹内容，便于边框对齐；
• 移除无效属性（如 justify-content、vertical-align 对非 flex 容器内的内联元素无效）。

✅ 推荐精简写法：

MINDESIGNS

.title {   font-family: 'Thick Thinks', sans-serif;   font-weight: bold;   font-size: 17vw;   line-height: 1;           /* 必须设置 */   margin: 0;   padding: 0;   text-align: center;   border-bottom: 1px solid #303030;   display: inline-block;   /* 确保宽度自适应文本 */   width: max-content;      /* 更现代的替代方案（兼容性需检查） */ }

⚠️ 注意事项：

• line-height: 1 表示行高 = 字体大小（em 单位），对多数标题足够紧凑；若文字出现截断（极罕见），可微调为 line-height: 0.95；
• 自定义字体加载时可能触发重排，建议配合 font-display: swap 提升体验；
• 移动端使用 vw 单位需测试最小字号（如加 min-font-size: 24px 防止过小）。

最终效果：标题上下边缘将严格贴合字形轮廓，实现如设计稿所示的紧凑视觉节奏。