是否有可能避免页眉水平未对齐？

Question

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

在标题和段落元素中都有相同的页边距和填充，但是标题明显地向右移动，这是因为与段落的字母"H“相比，由于其大小，其字母"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

这是正常的行为，但如果它真的让您感到困扰，您可以在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>

​

Answer 2

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

我想你只需要手动添加一个2px的填充或者以其他方式移动元素即可。

p {
    padding-left: 2px;
}