画像の下にどうしても隙間が残る場合はタグにvertical-align:bottomが正解【Webデザイン・CSS】
1年以上前の記事です。内容が古い可能性があります。
これは知らなかった。。というか、ここまで意識してなかった。。
<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>タグだけ配置したもの。
画像の下にちょっと隙間ができている。
同様にGoogle Chrome(最新バージョン35.0.1916.153m)
IEほどは目立たないがやはり隙間ができている。
実はこれはmarginやpaddingではなく同じCSSのvertical-align(バーティカルアライン)プロパティで修正することができます。
vertical-alignプロパティはテキストと画像が並んで表示される場合、その基準にするラインを決めるプロパティで、初期設定では値はbaselineになってます。
baselineというのは英字の小文字「a」や「b」などの一番下になります。
図で書くとこんな感じ。(赤いラインがベースライン)
つまり、「g」は「j」などはベースラインよりも下に文字がはみ出しているということになります。
これがイメージの下の隙間の原因だったわけです。
ということで、この隙間を修正するには<img>に対して「varticalalign:bottom」と指定してあげればいいということになります。
値をbottomにすることでテキストの一番下(つまり上図gの一番下)と画像の一番下が揃うようになるからです。
以上を施した修正後の表示は以下のとおりです。
IE(インターネットエクスプローラー11)
下の隙間がなくなってます。
同様にGoogle Chrome Ver35.0.1916.153m
こちらも同様バッチリです。
というわけで、<img>タグ下の意味不明な隙間はCSSに
と書くことで修正可能です。
これ、リセットCSSにも書いておいた方がいいですよねぇ。
さっそく書き加えることにしました。
□ 最もシンプルなオリジナルのリセットCSSを考えてみた【Webデザイン】 – ちほちゅう
アドセンス広告メイン
関連記事
-
Word(ワード)で縦書きができない
1年以上前の記事です。内容が古い可能性があります。パソコン教室で詰まってしまった …
-
女子小学生の間でAKB48メンバーを装う偽ブログが流行ってるの?
1年以上前の記事です。内容が古い可能性があります。なんかどうも女子小学生の間でA …
-
「Outlook Express」は「アドレス帳」初期化途中で再起動すると壊れる
1年以上前の記事です。内容が古い可能性があります。今、あることを実験しているため …
-
僕が家庭教師から講師になって実行した5つのこと
1年以上前の記事です。内容が古い可能性があります。転職して講師業を本格的に始めた …
-
デマを広める前に右クリックで「この画像を検索」。ツイッターでのリツイートは特に注意!
1年以上前の記事です。内容が古い可能性があります。先日、都内で凄い雹が降ったとツ …
-
タスクマネージャーでプロセスを調べてみた(Acer編)
1年以上前の記事です。内容が古い可能性があります。いよいよ自分のAcerマシンが …
-
世界シェアで「Windows 7」が「XP」を抜いてトップに
1年以上前の記事です。内容が古い可能性があります。自分、まだ「Windows 7 …
-
「LINE Creators Market(ラインクリエイターズマーケット)」の人気スタンプ。「かわベーコン」さんの「にゃっちーず」他
1年以上前の記事です。内容が古い可能性があります。「LINE Creators …
-
WordPress+Welcartでショッピングサイト構築【テーマ編】
1年以上前の記事です。内容が古い可能性があります。過去は振り返らない性格なので仕 …
-
Facebook(フェイスブック)で公開範囲を設定してポスト(投稿、シェア)する方法
1年以上前の記事です。内容が古い可能性があります。基本的なことなのですが、意外と …
Comment
[…] 時に、画像の下に変な余白ができて、デザインカンプ通りにレイアウトできないときがある。 原因は、ベースライン分の余白でした。 http://chihochu.jp/52660998/ 選択的代入するには […]