Question

至少在chrome和firefox中，当我增加字体大小时，我在网站中用作标题的段落会向下移动。

预先验证的html如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>But why?</title>
  </head>
  <body>
    <p style="font-size: 130px;">BECAUSE!!</p>
  </body>
</html>

Demo

使用chrome的inspect element功能，我发现不是字体的上部间距会大大增加其上方的空间，而是移动的主体。为什么呢？

Answer 1

您遇到了所谓的＆＃34;用户代理＆＃34;样式 - 浏览器本身应用的样式。在这种情况下，Chrome会应用这些边距：

p {
    display: block;
    -webkit-margin-before: 1em;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
}

由于保证金单位是em值，因此它们与字体大小成比例。你可以像任何风格一样覆盖它们：

p {
    margin: 25px 0;
}

<强> Demo

Answer 2

尝试将p标记的边距归零

p { margin: 0; font-size: 130px;}

身体大字体异常向下移动

2 个答案: