はじめに

先日、flexboxを使用して縦並びのレイアウトのページを作成していた時、marginやpaddingなど余白の設定をしていないのに画像の下部に余白（スペース）ができてしまいました。

flexboxで意図しない余白が発生してしまった場合の対処法を調べたのでご紹介します。

目次

現象を再現してみる

下記HTMLソースのように、画像<img src="画像パス">だけだと余白はできないようです。

2つの画像等をリンクタグ<a href="">等で囲むと画像の下に余白ができてしまいます。

HTML（余白ができない場合）

まずは正常（余白ができない）場合です。

imgタグだけを記述すると余白はできません。

<div class="test">
　　<img src="画像パス">
　　<img src="画像パス">
</div>

HTML（余白ができる場合）

上記のとおり、imgをリンクタグaで囲ってみました。

figureで囲ってみても同じ結果になりました。

<div class="test01">
　　<a href="#"><img src="画像パス"></a>
　　<a href="#"><img src="画像パス"></a>
</div>

CSS

CSSはどちらの場合も同じ物を使用しています。

画像を縦並びにするためにflex-direction: column;を設定していますが、使用しなくても結果は同じでした。

余白が分かりやすいように<background:#ff0000>を設定しています。

.test {
　　display: flex;
　　align-items: center;
　　justify-content: center;
　　flex-direction: column;
　　background: #ff0000;
}

できあがったもの（余白ができない場合）

写真は、以前参拝した賣布神社（島根県松江市）の物を使用してみました。

できあがったもの（余白ができる場合）

この場合だと、1枚目・2枚目の画像それぞれに下に余白（スペース）ができています。

flexbox下部の余白を無くす方法

ではどうすればflexbox下部の余白を無くなるのか、というと、flexboxの子要素（今回の場合aタグ）にもdisplay: flexを設定すれば良いです（孫要素（今回の場合imgタグ）に設定しても余白が無くなりました）。

HTML

<div class="test01">
　　<a href="#"><img src="画像パス"></a>
　　<a href="#"><img src="画像パス"></a>
</div>

CSS

.test {
　　display: flex;
　　align-items: center;
　　justify-content: center;
　　flex-direction: column;
　　background: #ff0000;
}
.test a {
　　display: flex;
}

できあがったもの

原理はよく分かりませんが、子要素もflexを設定することで、余白が無くなります。

余談ですが、display: blockなどでも試してみましたが、余白が無くなる物と無くならない物がありましたので、少しまとめてみました。