img要素はインライン要素。

Wednesday, July 11, 2007

カテゴリー：WEB

CSSでコーディングをするようになってから、HTMLに対する理解を深めなければならないと感じる日々。
そんな、自分のためのノート集。

画像をリスト要素で縦に配置したい。でも、下にできる空白が！空白が！！キーッ…というとき、ありますな。

こういう感じです。

結論：回避策は、CSSでvertical-alignを指定することであるが、その前に意識しておかないといけないのは、img要素はインライン要素である。

img要素はインライン要素

最初に理解しておかないといけないのは、img要素はインライン要素ということ。画像（img要素）は見た目がガチガチしているので、ブロック要素だと思い込んでた頃もありました。反省。インライン要素には、ほかにbr要素やspan要素があります。
インライン要素には、vertical-alignというプロパティを使うことができます。これは、テキストや画像などの縦方向の揃え位置を指定する際に使用します。vertical-alignの初期値は、baselineとなっています。

baselineは何かというと…

この線がベースラインです。このベースラインから下にはみ出る文字（ｊやｐ、ｇ）があるために、あらかじめライン下に空白が存在するのです。
つまりimg要素がインライン要素なので、画像の下に空白が生まれてしまうというわけ。

その空白を回避するために、CSSでvertical-alignの設定をbottomにすることで、空白のない見栄えができるというわけです。

正直個人的には、そういう仕様だから仕方ない、なんて思って気にしない派なんですが、やはり気にしたほうがいいよな…ってんで、原因追求してみた次第です。

[参考ページ]
table内に画像を隙間無く敷き詰めるには注意が必要です #1
ブロックレベル要素とインライン要素

coyummy

• No Comment
• ｜No Trackback