そんなにGeekじゃないエンジニアブログ

imgを子要素に持つ親要素divの高さが、imgより高くなっちゃう問題

calendar

表題の通り、ハマったのでメモ。

スポンサーリンク

子要素imgの高さと親要素divの高さが合わない

htmlをこんな感じにする。

<div class="parentdiv">
<img class="childimg" src="dosei.jpg" alt="" width="180" height="180" />
</div>

で、スタイルをこんな感じにする。

.parentdiv{
	display:inline-block;
	background-color:#0000ff;
}

そもそも、親要素をinline-blockにしておかないと子要素のサイズに合わせてくれない、というので指定しているけど、
結果的には表示がこんな感じになる。

画像の下にはみ出ている青い背景色が、親要素divの背景色。
つまり、親divの高さが、子imgよりちょっとだけ高い。
なんでや・・・

子要素imgの高さと親要素divの高さが合わない原因はベースライン関連

フォントのベースラインより下のスペースがある。
ベースラインの下の、ディセンダラインまでのスペース。

それが原因でimgの高さ(180px)に、下のスペース分がプラスされる、らしい。
なんと。

解決策

解決策は
・imgをブロック要素にする
・vertical-alignをtop or middle or bottomにする
ことで解決する。

.childimg{
	display:block;
	vertical-align:top;
}

こんな感じ。どっちかだけでOKなはず。

ベースラインがらみの話はややこしくてむずいですね。。

この記事をシェアする

コメント

コメントはありません。

down コメントを残す




CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください