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

` 内文本上下留白，使边框紧贴字体视觉边界，解决因默认行高导致的顶部/底部空隙过大问题。

在网页排版中，标题元素（如

）默认会继承浏览器的 line-height（通常为 1.2 左右），这会导致即使设置了 margin: 0 和 padding: 0，文字上方和下方仍存在不可见但实际占用空间的“行盒”（inline box）区域。尤其在使用超大字号（如 17vw）和自定义字体（如 ‘Thick Thinks’）时，该现象更为明显——字体本身可能具有较大的上升部（ascent）和下降部（descender），而默认 line-height 会进一步放大整体高度。

核心解决方案：强制重置行高
将 line-height 设为 1（无单位数值，表示相对于当前 font-size 的倍数），可让行框高度严格等于字号本身，从而让上下边框（如 border-bottom）真正贴近文字的视觉顶部与基线：

.title {   font-family: 'Thick Thinks', sans-serif;   font-weight: bold;   font-size: 14vw; /* 建议略调小以兼顾可读性与布局 */   color: #303030;   text-align: center;   margin: 0;   padding: 0;   border-bottom: 1px solid #303030;   line-height: 1; /* ✅ 关键声明：消除行内额外垂直空间 */   user-select: none; }

同时，html 结构可简化为语义更清晰、嵌套更少的形式：

MINDESIGNS

⚠️ 注意事项： 避免在 上设置 vertical-align 或 justify-content（后者对非 flex 容器无效），这些属性在此场景下无作用； line-height: 1 是安全起点，若字体仍有轻微上浮（如某些手写体顶部溢出），可微调为 line-height: 0.95 或结合 transform: translateY(-2px) 精修； 建议移除 .text-title 的冗余类，直接在 .title 上统一控制样式，提升可维护性； 使用 vw 单位时注意响应式断点，必要时搭配 clamp() 控制最小/最大字号（例如 font-size: clamp(2rem, 14vw, 8rem);）。

最终效果是：标题文字紧贴上边缘与下边框，视觉重心集中，符合设计稿中紧凑有力的呈现需求。