CSSで画像の下にできる隙間を消すには
画像は初期値だと文字と同じ行に置かれるため、下に数 px の隙間ができる。
画像を display: block にするか vertical-align を変えて、その隙間を消す方法を示す。
公開:
<div class="frame"><img class="photo" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='260'%20height='60'%3E%3Crect%20width='260'%20height='60'%20fill='%230f766e'/%3E%3Ccircle%20cx='130'%20cy='30'%20r='20'%20fill='%235eead4'/%3E%3C/svg%3E" alt=""></div>.frame {
max-width: 260px;
border: 2px solid #0f766e;
background: #fed7aa;
font: 16px/1.5 system-ui;
}
.photo {
width: 100%;
height: auto;
display: block; /* 文字と同じ行に置かない */
}画像に display: block を指定すると、文字と同じ行に置かれる配置をやめるので、画像の下の隙間が消える。
画像は初期値ではインライン要素で、行の基準線（ベースライン）にそろえて置かれ、その下に文字のディセンダー（g や y の下へ伸びる部分）のための空きが確保されるためである。
つまずき: 画像と枠の間に数 px の隙間が出る
img は初期値だと display: inline で、文字と同じように行に並ぶ。
行の中では下端がベースラインにそろい、その下には文字のディセンダーのための空きが残る。
隙間は画像ではなく行の高さの都合で生まれるため、画像を差し替えても、margin や padding を 0 にしても消えない。
display: block を指定すると画像は行を作らなくなり、枠の下端にぴったり付く。
.frame {
max-width: 260px;
border: 2px solid #0f766e;
background: #fed7aa;
font: 16px/1.5 system-ui;
}
.photo {
width: 100%;
height: auto;
}.frame {
max-width: 260px;
border: 2px solid #0f766e;
background: #fed7aa;
font: 16px/1.5 system-ui;
}
.photo {
width: 100%;
height: auto;
display: block;
}文中のアイコンには block を使わない
display: block の画像は前後の文字と同じ行に並ばず、改行されて別の行になる。
文章の途中に置くアイコンのように行内に残したい画像には、vertical-align: middle を使う。
ベースラインではなく文字の中央に画像の中央をそろえるので、アイコンが文字の高さに収まりやすい。
- 画像だけの枠（サムネイル・バナー・カード上部）→
display: block - 文章の途中に置くアイコン →
vertical-align: middle
.line {
margin: 0;
font: 16px/1.5 system-ui;
}
.icon {
display: block;
}.line {
margin: 0;
font: 16px/1.5 system-ui;
}
.icon {
vertical-align: middle;
}親の line-height: 0 は文字と同居できない
親に line-height: 0 を指定しても隙間は消える。
行の高さの余りがなくなるためで、画像だけが入る枠なら結果は同じになる。
ただし、その枠に文字も入れると行の高さが 0 になり、複数行の文字が重なって読めなくなる。
隙間の原因は行の側にあるが、画像側に display: block か vertical-align を付けるほうが影響する範囲が狭い。