span元素占用空间超出文本实际大小，需调整标题与上下线条间距

问题核心是你使用的粗体字体自带较大的上下留白，加上默认行高的影响，导致容器高度远大于文本实际高度，进而让边框和文本间距超出预期。以下是具体修改方案：

关键CSS调整 #

1. 给文本元素设置极小的行高，压缩字体自带的上下留白
2. 修复标题容器的布局属性，让对齐设置生效（之前的align-items和justify-content未起作用，因为容器未启用flex布局）

修改后的完整代码 #

HTML（无需改动）

<div id="title" class="title">
    <h1 id="title-h1">
        <span class="text-title">MINDESIGNS</span>
    </h1>
</div>

CSS（调整后）

h1{
    text-align: center;
    margin: 0px;
    line-height: 1; /* 让h1行高与文本保持一致 */
}

.text-title{
    font-family: 'Thick Thinks', sans-serif;
    font-weight: bold;
    color: #303030;
    font-size: 17vw;
    line-height: 0.9; /* 核心：缩小行高贴近文本实际高度，可根据字体微调数值 */
    user-select: none;
}

.title{
    width: auto;
    border-bottom: 1px solid #303030;
    display: flex; /* 新增：开启flex布局，让对齐属性生效 */
    align-items: center;
    justify-content: center;
    padding-left: 1%;
    padding-right: 1%;
    padding-top: 0;
    padding-bottom: 0;
}

额外说明 #

• 如果line-height: 0.9的效果还达不到预期，可以尝试更小的数值（比如0.85），直到边框与文本的间距符合理想状态
• 移除了.text-title中无效的justify-content和vertical-align属性，这些属性对行内元素span不生效

内容的提问来源于stack exchange，提问作者sappho7124