通过设置 `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 防止过小）。
最终效果：标题上下边缘将严格贴合字形轮廓，实现如设计稿所示的紧凑视觉节奏。
