2010-12-13 1 views
6

私はmeyerwebで、このページを超える閲覧しました:ラインハイトでパディングをコントロールするのはなぜですか?

http://meyerweb.com/eric/css/edge/menus/demo.html

と私は、ヘッダー内のパディングが作成される方法について興味が何かに気づいた:あなたはライン - を削除する場合は今

h1 {margin: 0; padding: 1em 0.25em 0; font: bold 2.5em Arial, sans-serif; line-height: 0.8em; border-bottom: 1px solid silver; text-align: right; color: #557; letter-spacing: 2px;} 

をheightディレクティブを使用すると、少し上に余白が追加されます。したがって、線の高さは基本的にh1の上から少しのパディングを取り除くように機能しています。私の質問は、なぜラインハイトを外してパディングトップを1emから.9emに変更しないのですか?

CSSで猫をスキンする方法はたくさんありますが、マイヤーのようなエキスパートがこのようにしているのであれば、おそらく選択の理由があると思いました。

おかげで、

ジョナ

答えて

6

1emより小さい線の高さを使用する理由は、実際に上の間隔ではなく、下端と線の下端の間隔に関係します。おそらく例が示します。この優れた:あなたがたが0.8emと、ラインが少し文字「P」と「G」の底部の上に座っている1EMデフォルトで、見ることができるようにhttp://www.jsfiddle.net/yijiang/tptbe/

alt text

文字がより美的に魅力的な位置にある文字「a」と「b」のすぐ下に配置されます

+0

ありがとうございました!私は理由があることを知っていた。 – Jonah

0

ラインにH1の​​下端との間の隙間が小さくなるようにするには。

0

ジェフが言ったように、上部のパディングを削除するのではなく、どちらの方向にもマージンやパディングを変更しても同じ効果はありません。

関連する問題