html - css: 異なるサイズのフォントを水平方向に揃える方法

Question

SOに関する最初の質問！

2行のテキストを水平方向に「ピクセルパーフェクト」に揃えようとしています。各行は異なるフォントサイズです。

<style type="text/css">
    *   { font-family: sans-serif;}
    div { float: left;}
    h1  { font-size: 150px;  margin-bottom:-30px; }
</style>

        <div>
            <h1> B </h1>
            <h6> B-L.align </h6>
        </div>
        <div>
            <h1> L </h1>
            <h6> L.align </h6>
        </div>

サンプルはこちら: http://jsfiddle.net/jgYBD/1/

サンプルを見ると、フォントが大きいほど「?padding?」が多いことがわかります。小さいフォントよりも。それらを数ピクセルだけずらします。

左マージンで試行錯誤することなく、それらを完全に左揃えにする方法または式を探しています!

すべてのアイデアを歓迎します、ありがとう。

Answer 1

表示されているのはパディングではなく、フォントのある種の「カーニング」です。そうではありませんが、ちょっと。それに関する大きな問題は、フォントごと、さらには文字ごとに異なることです。を交換してみてください

<h1>B</h1>

に

<h1>J</h1>

今、スペースははるかに小さくなっています!

このスペースは、フォント、サイズ、文字によって異なります。だから、私はあなたがそれを制御できるとは思わない

Answer 2

私が理解しているように、あなたはこれが欲しいですか?:

h6 {
    float: left;
position: relative;
left: 11px;
}

サンプルはこちら: http://jsfiddle.net/jgYBD/4/

Answer 3

これを試して

h6 { padding: 0 10px; }