画像の下に発生する謎の余白を消す方法 [CSS] | IT SKILL MAP STUDY -- WEBプログラミング知識【実務的なHTML,CSS,JavaScript,JQuery,PHPの知識】

画像の下に発生する謎の余白を消す方法

　画像の下に余白が発生することが有ります。HTMLにおいて<img>タグを利用する場合に発生する問題です。imgのdisplayプロパティがデフォルトdisplay:inline;のため発生する問題です。

　～　画像の下に発生する謎の余白が発生　～　

/* CSSの例 */

.sample1 {
	text-align:center;
	background: pink;
}

　imgタグに対してblockを指定することで余白はなくなります。blockの場合は親属性でtext-align:center;による中央揃えができなくなりますので、imgにmargin: 0 auto;を指定する必要があります。display:inline-block;では余白はなくなりません。

　この例の場合以外もimgタグをうまく制御できない場合はdisplay:block;を指定することで解決することが多いです。

/* CSSの例 */

.sample2 {
	background: pink;
}
.sample2 > img {
	display:block;
	margin: 0 auto;
}

　inlineおよび、inline-blockにおいて高さが明示されていないために余白が発生しているので、高さを固定値で指定します。又はvertical-align: bottom;とすることでも余白を解消できます。

　～　親要素と同じ高さをimgに指定する　～　

/* CSSの例 */

.sample3 {
	text-align:center;
	background: pink;
	height:100px
}
.sample3 > img {
	height:100px;
}

　～　vertical-align: bottom;を指定する　～　

/* CSSの例 */

.sample4 {
	text-align:center;
	background: pink;
	vertical-align: bottom;
}

.sample4 > img {
	vertical-align: bottom;
}

　親要素で高さが発生する要素を全て0でリセットする方法です。この場合子要素でfont-size、line-heightを指定しないと継承された0のままですので、子要素でテキストを利用する場合は再指定する必要があります。

/* CSSの例 */

.sample5 {
	text-align:center;
	background: pink;
	font-size:0;
	line-height:0;
}