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

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

子要素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なはず。

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

HTML5&CSS3ステップアップブック

posted with カエレバ

エビスコム ソシム 2018-01-24

Amazon

楽天市場

7net

HTML5&CSS3デザイン 現場の新標準ガイド(特典PDF付き)

posted with カエレバ

エビスコム マイナビ出版 2017-08-28

Amazon

楽天市場

7net