通过设置 `line-height: 1` 可有效压缩 `` 或 `` 元素内文本上下留白，使字体视觉高度紧贴实际字形边界，解决标题与上下边框间距过大的问题。
在网页排版中，即使设置了 margin: 0 和 padding: 0，标题（尤其是大字号、自定义字体的 <h1> 或内嵌 <span>）仍常出现“顶部和底部空白过大”的现象。这并非由外边距或内边距引起，而是字体自身的行高（line-height）默认值所致。浏览器会为每个内联元素（如 <span>）或块级标题（如 <h1>）自动分配基于字体度量（ascent/descent/leading）的行盒（line box）高度，该高度通常远大于文字实际渲染区域。
✅ 核心解决方案：显式重置 line-height
将 line-height 设为 1（无单位，即相对于当前 font-size 的倍数），可强制行盒高度等于字体大小本身，极大压缩垂直空间：
.title {
font-family: 'Thick Thinks', sans-serif;
font-weight: bold;
font-size: 17vw; /* 保持原尺寸 */
color: #303030;
text-align: center;
border-bottom: 1px solid #303030;
padding: 0 1%; /* 精简写法，等价于左右各1% */
line-height: 1; /* ✅ 关键声明：消除默认行高冗余 */
margin: 0; /* 确保无外边距干扰 */
display: inline-block; /* 可选：避免块级默认行为影响对齐 */
}同时建议简化 HTML 结构，移除不必要的嵌套（如 <span> 包裹纯文本的 <h1>），直接在语义化标题上应用样式：
<h1 class="title">MINDESIGNS</h1>
⚠️ 注意事项：
- line-height: 1 是理想起点，但对某些特殊字体（如手写体、超粗体），可能仍需微调为 0.9 或 0.95 以实现像素级精准；
- 避免在 <span> 上单独设 line-height（它继承父级），应统一作用于包含容器（如 .title 或 h1）；
- 若使用 vertical-align: middle，需确保父容器为 inline 或 inline-block，否则无效；
- 响应式大字号（如 17vw）下，建议搭配 min-font-size 或媒体查询做断点保护，防止小屏溢出。
最终效果：标题文字顶部紧贴上边缘、底部紧贴下边框，视觉紧凑有力，完全匹配设计稿预期。
