Question

我正在使用vw根据页面打开的浏览器进行文本放大。但是，填充比预期的要大。我希望它完全位于我页面的顶角，几乎没有填充。（我尝试padding:0px;没有结果）。这是一个例子：

在HTML中：

<heading>some text</heading>

在CSS中：

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

Answer 1

要获得您想要的结果，您可以执行以下操作之一：

1 - 使用行高。

<div>some text<br/>line 2</div>

div {
  font-size: 5vmax;
  padding: 0px;
  line-height: 0.75em;
  background:lightgray
}

body {
  margin: 0;
}

https://jsfiddle.net/7sqdnvyh/2/

2 - 您可以添加负边距来破解它。

<div>some text</div>

div {
   font-size:5vw;
   margin-top:-15px;
}

https://jsfiddle.net/7sqdnvyh/1/

Answer 2

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

要解决此问题，您可以尝试使用字体并查看字母顶部和底部的位置。对于每种字体，这可能会有所不同，也取决于上升器的高度。通常，上升者比帽子高度高。

对于Times New Roman，以下适用于大写字母：

<span>Foobar</span>

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

此处要更改的行是行高。玩这个可以给你所需的结果。例如，.70仍会剪切＆＃34; O＆＃34;一点。

我建议将字体设置得比需要的大得多，拨入行高，然后将其缩小。

＆＃13;

span {
  background: #ddd;
  display: inline-block;
  line-height: .70em;
  vertical-align: text-top;
}

body {
  padding: 0;
  margin: 0;
  font: serif;
  font-size: 20vw;
}

＆＃13;

<span>FOOBAR</span>

＆＃13;

使用vw font-size时填充文本

2 个答案: