見出しタグの前に奇妙な2pxギャップを修正しました

Question

私はh1/h2/h3（任意の見出しタグ）が2/3pxの右に移動したことに気づくまで、クライアント用のプロジェクトで作業していました。彼らはずっとそのことをしているかもしれませんが、私はただ気づいただけです。あなたがdevtoolsでハイライト表示すると、その隙間がかなりはっきりと見えることがあります（例を下に見てください）

これを気付いた人は誰ですか？前と後のスペースについて聞くたびに、グーグルは難しいです。答えは、テキストの開始前ではなく、上下のスペースに関するものです。私はChrome、Firefox、IEでテストしましたが、問題は同じです。私は左に置くことでその周りにいる：-2pxのハックだが、それを残すことはうれしくないと私はまた、理由を見て興味があります。それを見て、私はそれが設定されていた - webkit-margin-beforeプロパティと関係があるかもしれないと思ったが、重要なことをクリアすることさえもそれを修正しない。私はnecolas normalize cssファイルを使ってそれが役に立ったかどうかを調べてみましたが、何も起こりませんでした。私は大きなプロジェクトから継承したスタイルを使用していますが、以前はこのようなことは何も見ていません。 （または多分ちょうどそれに気づいたことはありません...）

はまた、唯一の時間タグの最初の文字の上にあるように思わ - ので、この複数行の例に：

second example showing multi-line h tag

スペースのみ最初の文字の前に表示され、次の行は正常です。

計算されたスタイルのショットをh2タグに貼り付けました。右側にテキストが強調表示されていることがわかるはずです。

computed styles and another image

ビットは困惑し、いくつかの助けを探して。

Answer 1

これは、フォント自体のレンダリング（本当に対話できないもの）が原因と考えられます。ブラウザによっては動作が若干異なる可能性があるため、動作を確認することをお勧めします。

これは、あなたが便利だと思うゲットーの回避策です。これは、テキストのインデントプロパティを使用することを含む：

.test { 
    position:absolute; 
    left:100px; 
    top:100px; 
    font-family:Arial,Helvetica,sans-serif; 
    font-size:30px; 
    text-indent:-50px; 
    } 

https://jsfiddle.net/rdo471dg/