CSSflexboxのimg画像下余白を消去する方法

Web制作の工程でレイアウトモジュールflexboxで、イメージ画像したの空白の編集が必要になったので、CSS3のレイアウトモジュールflexboxのイメージ画像したの空白を消去してみます。

はじめに最初の手順としては、まずCSSセレクタ指定をします。

余白が出ているimgタグの親要素タグにCSSセレクタを指定
ここではclass=””del_img_pad””と指定します。

 

その次に、確認用の背景色指定をします。

imgタグの余白をわかりやすくするために親タグのセレクタに背景色赤を指定
.del_img_pad{
background:red;}をします。

最後の手順としては表示確認と背景色の消去で、

さらにCSSプロパティと値をvertical-align: bottom;で指定し表示確認後、余白が消えていたらbackground:redを削除
.del_img_pad{
vertical-align: bottom;}。という方法で完了します。

 

この手順の流れで気を付けたい事が、ブラウザのバグによる余白の隙間がでるのでfont-size:0でも対処可能だが他のフォント表示に影響等があるためvertical-align: bottom;での設定を推奨という点について注意する必要があります。