ホームページ制作講座

ホームページ制作のHTMLやCSS、JavascriptやDTDとかDreamweaverなどWEB制作について

img画像下余白をCSS flexboxで消去する知識

ホームページ制作講座のブログ記事として今回は、イメージ画像したの空白を編集する方法に関してCSS3のレイアウトモジュールflexboxで消去についてレポートしてみました。わりと初歩的な知識や基本情報に関して記事にすることが多いです。

 


《ホームページ制作講座の手順の流れ1》
まずはじめに、CSSセレクタ指定します。


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

 

 

《ホームページ制作講座の手順の流れ2》
次の流れとしては、確認用の背景色指定します。


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

 

 

《ホームページ制作講座の手順の流れ3》
さいごに、表示確認と背景色の消去します。


さらにCSSプロパティと値をvertical-align: bottom;で指定し表示確認後、余白が消えていたらbackground:redを削除
.del_img_pad{
background:red;
vertical-align: bottom;}という流れでこの記事の説明は終了です。

 

 

このホームページ制作講座の記事に関しては注意点があります。ブラウザのバグによる余白の隙間がでるのでfont-size:0でも対処可能だが他のフォント表示に影響等があるためvertical-align: bottom;での設定を推奨という点については認識しておいたほうがよいでしょう。