是否可以避免 header 水平错位？

Question

有些字母占用了左边的空闲space。您可以通过突出显示代码段运行之后的第一个字母 "H" 来查看它。

页眉和段落元素的边距和填充相同，但页眉明显向右移动，因为它的字母 "H" 占据了更多的空白 space左侧由于其大小，与段落的字母 "H" 相比。

有什么办法可以避免这种转变，除非手动为每个案例使用填充？

<head>
  <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Open+Sans" />
  <style>
    body {
      font-family: Open Sans;
    }
  </style>
</head>
<body>
  <h1>Header</h1>
  <p>Hilariously small paragraph.</p>
</body>

Answer 1

您对此无能为力。这将取决于您使用的字体。

您只需要手动添加 2px 填充或以我想的其他方式移动元素。

p {
    padding-left: 2px;
}

Answer 2

这是正常的行为，但如果它真的让您如此困扰，您可以在 h1 元素上使用否定 text-indent，这会将整个文本向左移动一点：

h1 {
  text-indent: -0.05em;
}

<head>
  <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Open+Sans" />
  <style>
    body {
      font-family: Open Sans;
    }
  </style>
</head>
<body>
  <h1>Header</h1>
  <p>Hilariously small paragraph.</p>
</body>

是否可以避免 header 水平错位？

Is it possible to avoid header horizontal misalignment?

html

css

typography