プロ生ちゃんとお勉強するよ~

プロ生ちゃんと一緒にプログラミングをお勉強できるサイトです。

img下の隙間をなくすには

それでは、imgの下にできてしまう謎の隙間を除去する方法について勉強するね!!。

imgタグのスタイルで、marginpadding0pxに設定しているのに、 imgの下に謎の隙間ができて困ったことは無いですか?

<style>
img {
    margin: 0px;
    padding: 0px;
}
</style>

<img src="img01.png"><img src="img02.png">
<img src="img02.png"><img src="img01.png">

(解りやすいように、背景色を青にしています。)

まずは、この隙間の正体について解説しますね。

解りやすいように文字と画像を1行に並べてみました。

画像の一番下(青のライン)と、文字の一番下(赤のライン)の位置に着目してください。同じ行にあるはずなのに、 画像の下端は文字の下端よりも若干上に表示されています。

じつは、この赤のラインと、青のラインの差が、謎の隙間の正体になります。

w3cの原文

文字は、baselineを基準として描画されます。baselineの初期値は、ideographic baselineの位置になります。 imgタグもこのbaselineの位置を基準に描画されます。

そして、文字の高さは、em squareの高さ(top of em square ~ bottom of em square)で扱われる為、 次の行の先頭は、bottom of em square直下になります。 (図の中の'f'などのem square内に収まらない文字は、はみ出して描画されます)

このideographic baselineの位置と、文字の高さの基準となるbottom of em squareの位置の差が謎の隙間となって現れています。

では、この隙間を無くすにはどうすればいいか?

そうです。文字の下端と、画像の下端が同じ位置に描画されるように調整すればいいのです。

画像描画の垂直位置をどのラインを基準に描画するかを調整するには、CSSのvartial-align属性で行います。

vertical-alignで指定される値と基準ラインの関係

vertical-alignの値 基準となる位置
top top of em square
text-top handing baseline
middle middle
alphabetic alphabetic baseline
text-bottom ideographic baseline
bottom bottom of em square

画像描画の基準位置をテキストの高さの下端の基準点bottom of em squareに合わせてみます。 vertical-alignをbottomに設定します。

<style>
img {
    margin: 0px;
    padding: 0px;
    vertical-align: bottom;
}
</style>

謎の隙間が無くなりました。 やったね!!。

本キャラクターに関する著作権およびその他一切の権利は、プログラミング生放送および、それらの関連企業・関係者に帰属しています。これは、著作権およびその他一切の権利を放棄・譲渡するものではありません。





プロ生ちゃんとお勉強するよ~

プロ生ちゃんと一緒にプログラミングをお勉強できるサイトです。