0

ページ タイトルの下部が不均一に見える理由を突き止めようとしていました。

ページタイトル

包含要素を作成しました

#pageTitle {
    background-color: rgba(6, 6, 6, 0.85); 
    margin:0;
    padding: 0 12px;
    width: 100%; }

そしてh1

#pageTitle h1 {
    color: #93d9f5;
    font-family: 'MyriadWebPro Condensed';
    font-weight: lighter;
    margin: 0;
    text-transform:uppercase; }

同僚は、一部のフォントには下部に余分なパディングが含まれていると述べました。その測定値を見つけて、それを回避して均一に見えるようにするにはどうすればよいですか?

4

3 に答える 3

1

フォントによって追加される (少なくとも CSS 用語では) パディングはありません。代わりに、フォント デザインが異なれば、フォントの下部とフォントの上部の間のスペースの使い方も異なります。たとえば、通常、テキストのベースラインより下、大文字の高さより上にベースを残します。スペースの量は同じである必要はありません。たとえば、Verdana を使用した場合、下よりも上にスペースが多くなります。MyriadWebPro では、明らかに逆です。

これに対処するにはさまざまな方法があります。相対的な配置 (コンテンツを数ピクセル上下に移動する)、または を使用できvertical-alignますpadding。通常paddingは、最も単純で最も堅牢に見えます。ただし、要素ボックスの全体の高さが増加することに注意してください。

paddingこの設定では、水平方向のパディングを 12px に設定し、垂直方向のパディングを明示的にゼロに設定しています。文字を上下に移動するかどうかに応じて、上下マージンのいずれかを設定する必要があります。あなたの場合、最初に試すことができます

 padding-top: 2px;

適切な値は必然的にフォントに依存します。

于 2013-07-30T09:07:41.770 に答える
1

line-heightコンテナとタグのおよびvertical-alignプロパティ (特に line-height) を操作しh1て、必要以上の line-height を持つフォントの「パディング」効果を排除することができます。

例としてhttp://jsfiddle.net/bYB7Q/2/

于 2013-07-30T09:12:50.987 に答える