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

这是正常的行为，但是如果它真的让你感到不安，你可以在text-indent元素上使用负h1，这会将整个文本向左移动一点：

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;
}

是否可以避免标题水平错位？

2 个答案: