新・元地方の中規模印刷会社で苦悩するWebデザイナー改めWebディレクターの日記

自由な20代、窮屈な30代を経て、遂に40代になっちまったWebディレクター&パソコン講師の覚書と思う言(こと)。略称【ちほちゅう】

*

画像の下にどうしても隙間が残る場合はタグにvertical-align:bottomが正解【Webデザイン・CSS】

   

  • このエントリーをはてなブックマークに追加

1年以上前の記事です。内容が古い可能性があります。

これは知らなかった。。というか、ここまで意識してなかった。。

imgタグの罠

スポンサーリンク
 

<img>タグっていうのはちょっと変わっていて、インライン要素(テキスト同等)でありながらも高さと幅と持っています。
まあ、そんなヤツなのでHTML5からはまたちょっと別なカテゴリになってしまうみたいですが。。

しかも、通常、インライン要素には指定すべきではないmarginやpadding等も反映されてしまい、果てにはfloatまでしっかり使えたりします。
個人的には<img>タグはインライン要素であるということで、<img>タグに直接float等は指定せず、
親要素のブロックレベル要素(<div>等)にfloatを指定するように心がけています。

そもそも、文法上(HTML4.01Strictの場合)、<img>タグはブロックレベル要素に囲まれなければならないわけです。
ところがブロックレベル要素に囲まれた<img>タグは初期設定では下側に隙間ができてしまい、
marginプロパティやpaddingプロパティではどうしても消えないのご存知でしたでしょうか?

わかりやすく親要素のbackgroundに色を入れてみました。
IEとChromeで確認していますがどちらもちょっとだけ下に隙間ができているのがわかると思います。

IE(インターネットエクスプローラー)バージョンは11。
※ 一番上が<p>タグに文章と一緒に配置した<img>タグ。
※ 真ん中が<p>タグに<img>タグだけ配置したもの。
※ 一番下が<div>タグに<img>タグだけ配置したもの。
IE調整前
画像の下にちょっと隙間ができている。

同様にGoogle Chrome(最新バージョン35.0.1916.153m)
Chrome調整前
IEほどは目立たないがやはり隙間ができている。

実はこれはmarginやpaddingではなく同じCSSのvertical-align(バーティカルアライン)プロパティで修正することができます。
vertical-alignプロパティはテキストと画像が並んで表示される場合、その基準にするラインを決めるプロパティで、初期設定では値はbaselineになってます。

baselineというのは英字の小文字「a」や「b」などの一番下になります。
図で書くとこんな感じ。(赤いラインがベースライン)
ベースライン

つまり、「g」は「j」などはベースラインよりも下に文字がはみ出しているということになります。
これがイメージの下の隙間の原因だったわけです。

ということで、この隙間を修正するには<img>に対して「varticalalign:bottom」と指定してあげればいいということになります。
値をbottomにすることでテキストの一番下(つまり上図gの一番下)と画像の一番下が揃うようになるからです。

以上を施した修正後の表示は以下のとおりです。

IE(インターネットエクスプローラー11)
IE調整後
下の隙間がなくなってます。

同様にGoogle Chrome Ver35.0.1916.153m
Chrome調整後
こちらも同様バッチリです。

というわけで、<img>タグ下の意味不明な隙間はCSSに

img{vertica-align:bottom}

と書くことで修正可能です。
これ、リセットCSSにも書いておいた方がいいですよねぇ。

さっそく書き加えることにしました。
□ 最もシンプルなオリジナルのリセットCSSを考えてみた【Webデザイン】 – ちほちゅう

 - デザイン, パソコン教室

アドセンス広告メイン

Comment

  1. […] 時に、画像の下に変な余白ができて、デザインカンプ通りにレイアウトできないときがある。 原因は、ベースライン分の余白でした。 http://chihochu.jp/52660998/ 選択的代入するには […]

画像下の余白 | soylog へ返信する コメントをキャンセル

メールアドレスが公開されることはありません。

  関連記事

「Flash CS6」で編集したファイルは「Flash CS4」では編集できない

1年以上前の記事です。内容が古い可能性があります。盲点でした。 訓練校でFlas …

Googleマップで好きなところにピンを立てる方法

1年以上前の記事です。内容が古い可能性があります。以下の記事を参考にGoogle …

「Microsoft Office IME」でかな入力からローマ字入力に変更する方法

1年以上前の記事です。内容が古い可能性があります。久しぶりに弟から電話があり、何 …

WordPress(ワードプレス)のURL表記をHTML表記にする方法 #wp

1年以上前の記事です。内容が古い可能性があります。牛歩戦術でゆっくりと進んでいる …

no image
なぜだか人気です。

1年以上前の記事です。内容が古い可能性があります。ホームページを作ったからという …

携帯サイト(ケータイサイト)の作り方Part2

1年以上前の記事です。内容が古い可能性があります。携帯サイト作成に関するすばらし …

さすがに変なところから電話やSMSがきたので美女子アカウントを友達から外した【Facebook】

1年以上前の記事です。内容が古い可能性があります。いや、だから会ったことのない女 …

「Windows 7(64bit)」で「GT-7600U」を使う方法

1年以上前の記事です。内容が古い可能性があります。先日記事にした「Windows …

2011年「初日の出」画像まとめ

1年以上前の記事です。内容が古い可能性があります。ツイッター(Twitter)で …

実質「Windows XP」の次は「Windows 7」だということが判明

1年以上前の記事です。内容が古い可能性があります。延長に延長を重ねてきた「Win …

血液型オヤジ