画像の下にできる隙間を無くす方法

marginもpaddingも設定していないのに、画像の下に少し隙間が出てしまう場合があります。

なぜ隙間が出てしまうかというと、画像の下端は、縦方向の揃え位置を指定するvertical-alignプロパティのbaselineに初期値がなっているからです。

baselineというのは赤線の部分のことを指します。アルファベット小文字の”g”や”q”などの下部ではなく、”a”や”b”の下部の位置に合わせられます。

ベースラインの説明

画像はベースラインに合わせてあるので、下に隙間が空く

このため、画像の下にわずかな隙間ができてしまうのです。

これを回避するためには、vertical-alignの設定を下揃えにします。

画像のvertical-alignを下揃えにすると隙間が空かない

<br /><br />img {
vertical-align: top;
}<br /><br />




上揃えでも隙間を回避できます。

</pre>
img {
 vertical-align: bottom;
 }
<pre>




これでOKです。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">