2008年11月10日月曜日

CSSでタイル状に並べた行ごとの隙間を埋める

スズキです。

今までずっと、ほったらかしにしておいたのですが、
"MEMO 4 ME"に教えてもらいました。
http://memo4me.seesaa.net/

YUIのreset.cssをかけて、下記のようなHTMLで画像を並べると、

--------【HTML】--------
<div id="photo">
  <img src="..."/>
  <img src="..."/>
  ...
</div>
--------

列の隙間なく、ぴっちり隣同士がくっついているのですが、
行の隙間が、Firefoxで少し出てしまい、気持ち悪いなー
といった状態になります。(IEではOKです)

で、どうすれば回避できるかというと、下記のようにCSSにて、
imgタグに対し"vertical-align: top;"を指定します。

--------【HTML】--------
#photo img {
vertical-align: top;
}
--------

"suz-php-jquery"にも反映させておくか。

--
http://suz-lab.blogspot.com/

0 コメント: