13
4

4 に答える 4

13

説明：

ここでいくつかのことが起こっています。

あなたの例では、small要素はインラインレベルの要素です。つまり、その垂直方向の配置はvertical-alignプロパティによって決定されます。

デフォルトvertical-align値は ですbaseline。これは、small要素のベースラインが親ボックスのベースラインに揃えられることを意味します。

ボックスのベースラインを親ボックスのベースラインに合わせます。ボックスにベースラインがない場合は、マージンの下端を親のベースラインに合わせます。

line-height次に、プロパティとその計算方法を検討する必要があります。また、リーディングとハーフリーディングも考慮する必要があります。line-heightCSS では、半行送りは、要素のとの差を見つけ、font-sizeそれを半分に割り、計算された量のスペースをテキストの上下に配置することによって決定されます。

説明のために、これを示す画像の例を次に示します ( W3.org から取得)。

ここに画像の説明を入力

はであり、要素にはline-heightが含まれているため、要素のテキストの上下にスペースが追加されていると判断できます。20pxsmallfont-size13px3.5pxsmall

(20px - 13px) / 2 =  3.5px

font-size同様に、 ofを持つ周囲のテキスト ノードのハーフ リーディングを計算すると、周囲のテキストの上下に of のスペースが追加され16pxていると判断できます。2px

(20px - 16px) / 2 =  2px

ここで、これらのハーフ リーディング スペースの計算をプロパティに関連付けると、要素vertical-alignのベースラインの下により多くのスペースが実際に追加されていることがわかります。これは、要素を含む要素の計算された高さが、他の要素の計算された高さよりも大きかっsmallた理由を説明しています。psmallp

そうは言っても、要素の が減少するにつれて、要素の計算された高さが増加し続けることが予想されpます。この点をさらに説明すると、要素の計算された高さは、要素のがに設定されている場合であることがわかります。font-sizesmallp23pxfont-sizesmall6px

p { line-height: 20px; }
small { font-size: 6px; }
<p>some normal-sized text</p>
<p>some <small>small</small>-sized text</p>

考えられる回避策:

高さの違いは に追加された余分なスペースの結果であることがわかっているため、要素の値を にbaseline変更できます。vertical-alignsmalltop

p { line-height: 20px; }
small { vertical-align: top; }
<p>some normal-sized text</p>
<p>some <small>small</small>-sized text</p>

または、small要素にline-heightof17pxを2px指定すると、要素の上下にスペースが追加されます (これは、上で計算したように、周囲のテキストに追加されるスペースと同じ量です)。

// Surrounding text that is 16px:
(20px - 16px) / 2 =  2px

// Small element text that is 13px:
(17px - 13px) / 2 =  2px


p { line-height: 20px; }
small { line-height: 17px; }
<p>some normal-sized text</p>
<p>some <small>small</small>-sized text</p>

ただし、それを計算してハードコーディングする必要はありません。つまり、相対を使用して単位line-heightを省略する必要があります。px

font-sizeは で16pxあり、目的のline-height値はであるため20px、 を で割り、line-heightをfont-size取得します1.25。

p { line-height: 1.25; }
<p>some normal-sized text</p>
<p>some <small>small</small>-sized text</p>

relative を使用せずline-height: 1.25、引き続き を使用したい場合は、もちろん、要素の値を初期値である にline-height: 20pxリセットできます。smallline-heightnormal

p { line-height: 20px; }
small { line-height: normal; }
<p>some normal-sized text</p>
<p>some <small>small</small>-sized text</p>

于 2014-05-04T20:56:32.803 に答える
1

Josh Crozier が投稿した回答に代わる方法は、小さな行の高さをまとめてリセットすることです。

p { line-height: 20px }
small {line-height: initial;}
<p>some normal-sized text</p>

<p>some <small>small</small>-sized text</p>

于 2017-02-13T20:51:56.907 に答える