なぜ、ラインハイトのdivに画像を配置すると、3pxのギャップが上部に表示されますか？

Question

this pageをご覧ください。右側の画像はdiv内で中央に配置する必要があります。しかし、あなたがよく見ると、上部に約3ピクセルの小さな境界があります。 overflow: hiddenを無効にした場合（FirebugまたはIE8に相当）、下部にはみ出してしまいます。

HTMLはこれです：

<div class="small"> 
    <img src="/images/photos/Bedroom.jpg" alt="Bedroom" /> 
</div> 
<div class="small"> 
    <img src="/images/photos/View.jpg" alt="View" /> 
</div> 

そしてCSS、この：

この神秘的なギャップを引き起こしている何

div.small 
{ 
    width:100px; 
    height:100px; 
    line-height:100px; 
    text-align:center; 
    overflow:hidden; 
    margin:5px; 
    background-color: #C0C0C0; 
    float:left; 
} 
div.small img 
{ 
    vertical-align: middle; 
    max-width:100px; 
    max-height:100px; 
    display: inline; 
} 

？私はマージンとパディングをチェックしましたが、問題はないようです。

Answer 1

注意：私はこの説明が正しいとは確信していませんが、それは私には妥当と思われます。

まずは、スペックがleading and half-leadingに言っているか見てみましょう：

「行の高さ」の値がコンテンツ領域の高さと異なる場合がありますので、上および下のスペースがあるかもしれませんレンダリングされたグリフ。内容の高さと 'line-height'の使用される値の差を先頭といいます。リーディングの半分はハーフリーディングと呼ばれます。

ユーザエージェントは、上下にインラインボックスの縦にハーフリーディングを追加して縦にグリフを配置します。たとえば、テキストの一部が「12px」で、「行の高さ」の値が「14px」である場合は、2pxsの余分なスペースを追加する必要があります.1pxを上に、1pxを文字の下に追加します。 （これは、空のボックスにも無限に狭い文字が含まれているかのように、空のボックスにも適用されます）。

これまでのところ、とても良いです。したがって、div.smallのline-heightより小さい高さを持つdiv.small内のラインボックスは、div.smallと垂直に中央に配置されます。今度は、the vertical-align propertyで特異的にmiddle値を見てみましょう：

が親ボックスのベースラインと親の半分のx高さボックスの垂直方向の中間点の位置を合わせます。

これは必ずしもラインボックスの中心ではありません。正確な位置は、フォントの面とサイズの選択によって変わります。これを確認するには、テキストを大きくしたり小さくしたりします。ギャップのサイズが変わります。

見つけたとおり、font-size: 0を設定すると、そのギャップが完全になくなります。フォントには高さがないので、ラインボックスは50pxの先頭と半分を取得し、ベースラインは垂直方向の中央に配置されます。 vertical-align: middleイメージをレンダリングするために、ブラウザはそのベースラインに中間点を設定し、さらにフォントのx高さを0に設定します。これは、垂直中心の画像を与える。

Answer 2

この問題を解決するには、font-size:0;をdivに設定してください。しかし、それはまだギャップを説明していません。誰でも何を知っているのギャップを引き起こす？

Answer 3

私は何が起こっているのか完全に説明することはできませんが、同じ問題を扱った後、それはCSSのfontプロパティを宣言する方法と関係があるようです。

フォント：11px/1.35em Verdana、Arial、Helvetica、sans-serif;

=明らかにテーブルには悪いです。 - その宣言を削除して代わりにfont-size：11px、line-height：px、font-familyなどを使用して、ギャップを修正しました！