* You are viewing Posts Tagged ‘css 画像 text line-height vertical-align’

画像関連のCSS TIPS

渡部です。
最近はCSSレイアウトでコンテンツを作ってます。
CSSはブラウザによって解釈が異なることが多いので、けっこう悩まされるのですが、先日も作っていて画像関連ではまったことがあったので、その件について書いてみようと思います。

box要素に画像を並べると、妙な余白が出る件

backgroundを指定しているbox要素に画像を並べていたのですが、なぜか余白が空いてしまう現象が起こりました。(最初は背景画像もあいまってその現象に気が付かなかった・恥)

HTMLコード
<div id=”header_menu”>
<img src=”images/menu.gif” width=”90″ height=”21″>
<img src=”images/menu.gif” width=”90″ height=”21″>
<img src=”images/menu.gif” width=”90″ height=”21″>…
</div>
CSSコード
#header_menu {
margin-top: 5px;
height: 21px;
background: #333;
vertical-align: bottom;
}
このコードでの表示
menu_s1.jpg

調べてみたところ、vertical-align属性と画像の垂直位置が妙なことになっていた模様。
vertical-align属性はtop, middle, bottomに加えて、baseline, text-top, text-bottomというプロパティがあるのですが、どうやら画像vertical-alingはデフォルトではtextのbaselineに合わされているようなんですね。
結局画像のcssにvertical-align:text-bottom属性をセットして無事解決!

追加したCSSコード
#header_menu img{
vertical-align: text-bottom;
}
CSS適用後の画像
menu_s2.jpg

Continue Reading