0

そのようなcssを使用してブロックに変換されたリンクがあります：

.button-user-add {
    background: green;
    width: 150px;
    height: 24px;
    display: block;

    float: right;
    text-align: center;
    color: #fff;

    text-transform: uppercase;
    text-decoration: none;
    font-size: 15px;
    font-weight: bold;

    font-family: Arial;

    line-height: 24px;

    margin-top: 24px;
    padding: 0px;

}

しかし問題は、上からのパディングが下からのパディングよりも約 1px 少ないことです。

なんで？

どうすれば修正できますか？

4

1 に答える 1

4

font-size:15pxArial には存在しません。ブラウザは 14px または 16px に丸めます。

(訂正: 最新のブラウザーは、より奇数のサイズを含む、より広い範囲のフォント サイズをレンダリングするようになりました。Arial 12px から 22px を示す簡単なデモを次に示します。)

テキストの主要部分 (大文字の H が占めるスペース) はベースラインの高さです。その上がアセンダー (大文字のアクセント記号に使用) で、その下がディセンダー (yp や q などの文字の末尾に使用) です。

font-size = ascender + baseline height + descender

line-height は、フォントがレンダリングされるスペースを予約しますが、そのスペース内でテキストがレンダリングされる正確な場所は、font-family、font-size、ブラウザー、および (明示的な line-height がない場合) によって異なります。ブラウザが使用するデフォルトの行の高さ。行の高さの範囲内で、テキストはほぼ中央揃えになりますが、正確には中央揃えにはなりません。

明示的な行の高さがある限り、少なくとも Arial の場合、テキストの位置は通常、ブラウザごとに 1 ピクセル以内で変動します。しかし、ブラウザにそれ以上の一貫性を持たせてテキストを表示させる方法はありません。

于 2012-08-09T10:48:58.233 に答える