0

divでラップされたこの単純な画像タグがあります。なぜdivの高さが画像よりも大きくなるのかわかりません。

html

<div class="cc-thumbnail-bar-item">
        <img src="http://www.sir-chesterfield.de/media/catalog/product/0/1/01.01.a_4_4.jpg" class="cc-thumbnail-bar-item-image" />
</div>

css

.cc-thumbnail-bar-item {
    border: 1px solid #918e7d;
}

.cc-thumbnail-bar-item-image {
    width: 48px;
}

http://jsfiddle.net/cburgdorf/YW8Ka/

4

1 に答える 1

1

これは、画像が文字のようにインラインでレンダリングされるためです。すべてのテキストの下部にスペースが表示されます。

line-height次のいずれかを追加することで修正できますvertical- align

追加line-height:0

.cc-thumbnail-bar-item {
     border: 1px solid #918e7d; line-height:0
}

デモ

追加vertical-align

.cc-thumbnail-bar-item-image {
    width: 48px; vertical-align:top
}

デモ 2

于 2013-03-19T11:45:17.867 に答える