7

次のhtmlスニペットでfont-sizeがどのように機能するかを理解するのに苦労しています。

.container {
    padding: 20px;
}

ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

ul li {
    margin: 0;
    padding: 0;
    background: blue;
    height: 50px;
    line-height: 50px;
    color: white;
}

ul li span {
    border: 1px solid red;
    margin: 0;
    padding: 0;
}

#test1 li {
    font-size: 48px;
}

#test2 li {
    font-size: 42px;
}​

<div class="container">
    <ul id="test1">
        <li><span>Test</span></li>        
    </ul>
</div>

<div class="container">
    <ul id="test2">
        <li><span>Test</span></li>
    </ul>
</div>​

li要素の高さを正確に50ピクセルにし、テキスト/スパンをその要素の垂直方向の中央に配置する必要があります。すべてが垂直ですが、font-sizeを48pxに設定し、2pxの赤い境界線を設定すると、境界線がli要素の外側に押し出されます。目に見えないパディング/マージンが適用されているようです。

これが「問題」を示すjsfiddleです：http：//jsfiddle.net/qtVK3/

Chromeで要素を調べるspanと、スパン要素の実際の高さが57pxであることがわかります。余分な7pxはどこから来るのですか？

4

2 に答える 2

4 
display: inline-block

インライン要素であるため、スパンで必要です。デフォルトでは、インライン要素に上下のパディングを左右にのみ追加することはできません。したがって、パディングを0に設定しても、スパンはパディングされます。

また、行の高さを48pxに変更する必要があります。

行の高さ：48px;

于 2012-09-19T16:30:39.957 に答える
0

line-height (複数行のテキストを区切るスペース) がありません - これはフォントの高さに追加されます。

フォント サイズを明示的にピクセル単位で設定するのではなく (アクセシビリティに不適切な形式)、含まれている要素の高さを目的のサイズに設定する必要があります。

編集：私は太っています。コンテンツ ボックスの外側に余白/境界線が追加されます。line-height を 50px に設定したため、境界線は 50px に追加されるため、要素の外側に表示されます。

ただし、フォントをピクセル単位で設定することについての私のコメントはまだ有効です。

于 2012-09-19T16:18:17.503 に答える