画像下の意図しないスペースをなくしたい

2018年5月10日

<div>～</div>タグの中に画像（<img>タグ）が入っているとボックスの下に意図しないスペースが空きます。paddingもmarginも入れていないのに何故だって混乱しますよね。

例

[HTML]

<body>
<div class="box">
    <img src="./images/logo.png" alt="">
</div>
</body>

[CSS]

.box {
	background-color: #f00;
}

.box img {
    width: 256px;
    height: 256px;
}

.box {

background-color: #f00;

}

.box img {

width: 256px;

height: 256px;

}

[ブラウザ表示]

こんな感じで画像の下に意図しないスペースができてしまいます。

意図しないスペースをなくすには<img>に適用されるCSSのvertical-alignプロパティ設定を「top」「middle」「bottom」のいづれかにすると解消できます。

[CSS]

.box {
	background-color: #f00;
}

.box img {
    width: 256px;
    height: 256px;
    vertical-align: middle;
}

.box {

background-color: #f00;

}

.box img {

width: 256px;

height: 256px;

vertical-align: middle;

}

[ブラウザ表示]

デフォルトの設定が画像の横にテキストが入ることを想定されているようで、vertical-align:baseline;になっています。この想定されたテキストのbaselineの下に飛び出す部分の領域が確保されてしまうことがスペースができる原因です。

はじめにimg要素に対してvertical-align:baseline;以外のCSS設定を入れて統一しておくと混乱せずに済むかと思います。

Page Navi