画像の下に、少し隙間ができていることに気付いた。
例
というか、前から気になってはいたのだけど、忙しさにかまけてスルーしていただけなのですけどね。
やっと、検索してみたら、原因はどうやら
img タグの vertical-align の初期値(デフォルトバリュー)が baseline になっている
ためのようです。
どういうことかというと、小文字の q や g や p や y は、下に突き出る部分があるわけで、その分を考慮して、文字の基準位置は少し上にずらされているのですね。
そのための文字の基準位置が「 baseline 」というわけですが、なぜか画像もこれと同じ「 baseline 」になっている。
※どうやら img タグが問題なのではなく、インライン要素はすべて基準が「 baseline 」になっているようです。
HTML5になって、インライン要素／ブロック要素 の概念がなくなったわけですが、それでもデフォルト値は古い規格を継承しているわけですね。
※２ HTML5の初期値を見てみると、vertical-align はほとんどのタグが初期値は baseline になっているようですね。。。
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
つまり、これを解決する方法は３つ
(1)「 vertical-align 」を「 bottom 」にする。
(2)「 display 」を「 block 」にする。
(3)「 font-size 」を「 0 」に、「 line-height 」を「 0 」にする。
(1)の「 vertical-align 」を「 bottom 」にする手法は、「 vertical-align 」が効かない状況で悩ませられた経験がある人には嫌な感じですが(笑)、インライン要素には普通に効きますので大丈夫(笑) img タグは、最初にスタイル指定で bottom に指定しておくという手もありますね。
(2)は、inline-block ではダメなようです。inline-block は扱いがインライン要素と同じなのか。
(3)の手法は、画像だけ、文字大きさと行高さを0にしてしまう方法・・・これは、文字に適用されないように注意しないと面倒なので、あまりお薦めできませんが。(いちいち画像の周りを div で囲ってその中だけ文字大きさと行高さを0にする必要がある。）
ブロックにしてしまうのが一番簡単ですが・・・
ブロックにしてしまうと、文字が横にならべなくなってしまう弊害も？
でも、そもそも大きい画像の横に文字を回り込ませるのも、可能なのは一行だけですから、ほとんど使う機械はないですからね。（複数行の文章を回り込ませるにはFloatを使うかブロック領域を並べて中に入れ込むしかない。）
むしろ、ブロック要素にしておいたほうが、画像の横に一行だけへんに文字が回り込まなくて良いかも？
文字と同じ高さの画像を文字列の中に入れ込みたいという要望がある人には困るかもしれませんが、そういう事はほぼしたことがないです、私は。まぁ必要になったらその画像だけ設定を変えれば良いだけですからね。
コメント