html - font-familyがボタン間に1pxのギャップを散発的に追加するのはなぜですか？

原文 html css fonts

質問をよくお読みください。 How to remove the space between inline-block elementsと同じではありません。

次のHTMLを検討してください。

body {
  /* font-family: Arial; */
}

.my-class {
  display: inline-block;
  margin: 0 0 0 -4px;
  background-color: transparent;
  border: 1px solid #ccc;
  padding: 20px;
}

<div>
  <button class="my-class">Hello</button>
  <button class="my-class">Stack</button>
  <button class="my-class">Overflow</button>
</div>

生成されるもの:



しかし、私が追加した場合:

body {
  font-family: Arial;
}

その結果、2番目と3番目のボタンの間に1pxのスペースができます。



問題は次のとおりです。なぜfont-familyをbodyに追加すると、ボタン間のスペースが影響を受けるのですか？

答え

これは、スペース文字であっても、フォントごとに幅が異なるために発生します。あなたはすでにインラインブロックの空白問題について知っています。したがって、Arialを設定すると、これらの空白の幅がブラウザのデフォルトフォント(または幅が異なる他のフォント)(私の場合はTimes New Roman)からわずかに変更されます。

等幅フォントを設定したときの変化がどれほど劇的かを確認してください。

では、なぜそれが2番目と3番目のボックスの間で発生し、1番目と2番目のボックスの間では発生しないのでしょうか。入力した単語の幅に基づいてピクセル値を丸めることになると確信しています。背景に疑似サブピクセルレンダリングが存在するようですが、最終的なレンダリングプロセスでは10進数値が丸められます。 Hello Stack Overflowの代わりにArialを使用してHell Stack Overflowを印刷するとどうなるかを確認してください。ギャップは同じに見えます。したがって、これは望ましくない偶然の一致です。

これが丸めの問題であることを証明するもう1つのポイントは、さまざまなページズームレベル間でのギャップの変化です。 HTMLで小数を処理する場合、レイアウトでこれらのピクセルの不一致が発生するのはごく一般的なことです。ズームにより、別の除算/乗算ステージが追加され、コア値がさらに変更され、最終的なレイアウトで完全に予測できない動作が発生します。

関連記事