gpt4 book ai didi

html - 使用 vw 字体大小时填充文本

转载 作者:可可西里 更新时间:2023-11-01 13:21:56 31 4
gpt4 key购买 nike

我正在使用 vw 根据打开页面的浏览器放大文本。但是,填充比预期的要大。我希望它恰好位于我页面的右上角,几乎没有填充。 (我尝试了 padding:0px; 但没有结果)。这是一个例子:

在 HTML 中:

<heading>some text</heading>

在 CSS 中:

heading{
font-size:5vw;
padding:0px;
margin:0px;
}

最佳答案

这可能是因为大多数字体(包括系统字体)没有完全延伸到每个字形的边界框的顶部和底部。这意味着即使元素的高度为 1em,大写字母也不会触及元素的顶部。

要解决这个问题,您可以尝试使用您的字体,看看字母的顶部和底部落在哪里。这对于每种字体可能不同,并且还取决于上升器的高度。通常,上升股高于上限高度。

对于 Times New Roman,以下适用于大写字母:

<span>Foobar</span>

span {
background: #ddd;
display: inline-block;
line-height: .70em;
vertical-align: text-top;
}

这里要改变的行是行高。玩这个应该会给你你需要的结果。例如,.70 仍将“O”剪掉了一点。

我建议使字体比需要的大得多,调整行高,然后再缩小。

span {
background: #ddd;
display: inline-block;
line-height: .70em;
vertical-align: text-top;
}

body {
padding: 0;
margin: 0;
font: serif;
font-size: 20vw;
}
<span>FOOBAR</span>

关于html - 使用 vw 字体大小时填充文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45702429/

31 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com