css span元素占用的空间大于实际文本

soat7uwm 于 2023-04-01 发布在其他

关注(0)|答案(2)|浏览(137)

我需要底部和顶部行更接近标题，但字体占用的空间比实际需要的要多。
这就是它在实践中的样子：Actual Page
这就是我试图让它看起来的样子：Ideal Look
我的代码：
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;
}

.text-title{
    font-family: 'Thick Thinks', sans-serif;
    font-weight: bold;
    color: #303030;
    font-size: 17vw;
    justify-content: center;
    vertical-align: middle;
    margin: 0;
    user-select: none;
}

.title{
    width: auto;
    border-bottom: 1px solid #303030;
    align-items: center;
    justify-content: center;
    padding-left: 1%;
    padding-right: 1%;
    padding-top: 0%;
    padding-bottom: 0%;
}

css

来源：https://stackoverflow.com/questions/75860749/space-taken-by-a-span-element-is-bigger-than-the-actual-text

2条答案

按热度按时间

7fhtutme1#

line-height: 1;应该能让你很接近。

.title {
    font-family: sans-serif;
    font-weight: bold;
    font-size: 14vw;
    border: 1px solid blue;
    display: inline-block;
    line-height: 1;
    margin-top: 1rem;
}