2026.01.18

【HTML/CSS】画像（img）下の微妙な空白を無くしたい

takahide

おはようございます。タカヒデです。

HTMLを書いている時に、「画像下に謎の空白」ができていることないですか？

分かりやすいように色を付けていますが、グレーの四角が画像で青が背景です。

なんですかこの空白は…
必要ならこっちで空白つけるのでわざわざつけないでくださいよ…

ということで、本日は「画像（img）下の微妙な空白を無くす方法」を紹介します。

こんな人にオススメ

それでは見ていきましょう。

Contents

まずは何もしないとどうなるのか？

冒頭にもチラッと見せましたが、何も考えずに「imgタグ」を配置するとどうなるのでしょう？

CSSには分かりやすいように背景の色のみを変更しています。

<div class="main_image1">
    <img class="pattern1" src="https://it-newcomer.com/wp-content/uploads/2026/01/test.jpg">
</div>

<div class="main_image1">
    <img class="pattern1" src="https://it-newcomer.com/wp-content/uploads/2026/01/test.jpg">
</div>

.main_image1{
    background-color: blue;
}

.main_image1{
    background-color: blue;
}

実行するとこんな感じ↓

でましたね。微妙な空白。

これを無くしたい。というのが本日のテーマです。

では早速、解決策を見ていきましょう。

方法の1つ目は、「vertical-align」に「baseline」以外の値を指定する方法です。
具体的には、「top」「middle」「bottom」などの値を指定します。

ここでは「top」を入力してみました。

<div class="main_image2">
    <img class="pattern2" src="https://it-newcomer.com/wp-content/uploads/2026/01/test.jpg">
</div>

<div class="main_image2">
    <img class="pattern2" src="https://it-newcomer.com/wp-content/uploads/2026/01/test.jpg">
</div>

.main_image2{
    background-color: blue;
}

.pattern2{
    vertical-align: top;
}

.main_image2{
    background-color: blue;
}

.pattern2{
    vertical-align: top;
}

実行するとこんな感じ↓

おお！素晴らしい。
画像下の空白が消えましたね。

なお画像右側の青は比較用にあえて見せているだけなので問題ありません。

解決策をもう一つ紹介します。

「imgタグ」に対し、「display: block」で画像をブロック要素にする方法です。

実際のコードは以下です。

<div class="main_image3">
    <img class="pattern3" src="https://it-newcomer.com/wp-content/uploads/2026/01/test.jpg">
</div>

<div class="main_image3">
    <img class="pattern3" src="https://it-newcomer.com/wp-content/uploads/2026/01/test.jpg">
</div>

.main_image3{
    background-color: blue;
}

.pattern3{
    display: block;
}

.main_image3{
    background-color: blue;
}

.pattern3{
    display: block;
}

実行するとこんな感じ↓

こちらも画像下の空白が消えているのが分かりますね。

これで「画像下の空白問題」は解決できますね。

以上が、「HTML/CSSにおいて、画像（img）下の微妙な空白を無くす方法」でした。

まとめ

これであなたもキレイなWebページを作成できますね。

お疲れさまでした。

ABOUT ME