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-familybodyに追加すると、ボタン間のスペースが影響を受けるのですか?
答え
これは、スペース文字であっても、フォントごとに幅が異なるために発生します。あなたはすでにインラインブロックの空白問題について知っています。したがって、Arialを設定すると、これらの空白の幅がブラウザのデフォルトフォント(または幅が異なる他のフォント)(私の場合はTimes New Roman)からわずかに変更されます。

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

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

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

html - CGIを使用したフォームデータの処理

javascript - RubyコードでJqueryを介してクリックをトリガーする

javascript - JavaScriptキャンバスタグとストロークテキストメソッド

javascript - Element.prop( 'scrollHeight')は、Angular.jsの異なるリストアイテムに対して同じ値を返します

jquery - jqueryタブから背景色を削除する

html - Google Chromeでのテキストの自動更新(レンダリングの問題)

javascript - 2画像を同時に表示

html - ビューポートの高さメタタグ

javascript - JavaScript画像のsrc属性が誤った値を返す

javascript - JavaScriptでHTMLチェックボックスをループ