画像の下に発生する謎の余白を消す方法
画像の下に余白が発生することが有ります。HTMLにおいて<img>タグを利用する場合に発生する問題です。imgのdisplayプロパティがデフォルトdisplay:inline;のため発生する問題です。
~ 画像の下に発生する謎の余白が発生 ~
結果
HTML
CSS
-
-
/* HTMLの例 */
-
/* CSSの例 */ .sample1 { text-align:center; background: pink; }
解決方法1:display:block;を指定する
imgタグに対してblockを指定することで余白はなくなります。blockの場合は親属性でtext-align:center;による中央揃えができなくなりますので、imgにmargin: 0 auto;を指定する必要があります。display:inline-block;では余白はなくなりません。
この例の場合以外もimgタグをうまく制御できない場合はdisplay:block;を指定することで解決することが多いです。
結果
HTML
CSS
-
-
/* HTMLの例 */
-
/* CSSの例 */ .sample2 { background: pink; } .sample2 > img { display:block; margin: 0 auto; }
解決方法2:imgに高さを与える
inlineおよび、inline-blockにおいて高さが明示されていないために余白が発生しているので、高さを固定値で指定します。又はvertical-align: bottom;とすることでも余白を解消できます。
~ 親要素と同じ高さをimgに指定する ~
結果
HTML
CSS
-
-
/* HTMLの例 */
-
/* CSSの例 */ .sample3 { text-align:center; background: pink; height:100px } .sample3 > img { height:100px; }
~ vertical-align: bottom;を指定する ~
結果
HTML
CSS
-
-
/* HTMLの例 */
-
/* CSSの例 */ .sample4 { text-align:center; background: pink; vertical-align: bottom; } .sample4 > img { vertical-align: bottom; }
解決方法3:親要素にfont-size:0;line-height:0;を指定する
親要素で高さが発生する要素を全て0でリセットする方法です。この場合子要素でfont-size、line-heightを指定しないと継承された0のままですので、子要素でテキストを利用する場合は再指定する必要があります。
結果
HTML
CSS
-
-
/* HTMLの例 */
-
/* CSSの例 */ .sample5 { text-align:center; background: pink; font-size:0; line-height:0; }