REDLINE MAGAZINE | CSSビギナー向け 陥りがちな罠Vol.04

CSSビギナー向け 陥りがちな罠Vol.04

『vertical-align』の話を書こうと思ったわけだど、例があった方が分かりやすいかなということで、まずよくありがちなCSSの困りネタから。

画像の下に隙間ができてしまう

例えばこんなソースにすると･･･
<p>
<img src="xxx.gif" />
隙間･･･(テキストとか)
</p>

こんな感じで隙間ができるのを回避したいと。
これはブラウザのバグでもなんでもなくてcssの仕様どおりの表示結果。元々この場合img要素はインライン要素なので、その縦方向のどこに配置するかを決める『vertical-align』がデフォルトの値『baseline』として扱われる。ので、その『vertical-align』の値を変更して下にピタっと付くようにすれば解決する。

CSSソース
p img{
	vertical-align:bottom;
	}
XHTMLソース	
<p>
<img src="xxx.gif" />
隙間･･･(テキストとか)
</p>

vertical-alignを指定する場所に注意。

ここでよく最初に間違うのが、このケースの場合、pタグに対して『vertical-align:bottom;』を指定してしまってうまくいかないというケース。『vertical-align』はよく「垂直方向の位置を揃える」として解説されているが、何に対して指定しても効くプロパティではない。

『vertical-align』がちゃんと言う事を聞いてくれるのは、基本的に「行ボックスの中のインライン要素に対して(上のケースの場合pタグの中のimgタグに対して)」と「セル要素(thやtdの事)」だけ。つまり何でもかんでも垂直方向の位置が自由自在になるわけではないという事。

で、その決まりをふまえた上で適応した場合は指定ごとにこちらのサンプルのような場所にテキストが配置されることになる。(ページ下のほうにサンプルがありました。)
>>vertical-align－スタイルシートリファレンス

上記サイトのサンプルでもpタグでの例を挙げられていたが、テーブルのセルに対して指定しても同じような指定が効く。但し、上の方で『vertical-align』のデフォルトの値は『baseline』だと書いたが、こちらのサイトによると『HTML仕様書の都合、セル要素の初期値は[middle]』となるようです。
>>vertical-align - CSS Dencitie

またセル要素には『super』『sub』『text-top』『text-bottom』の指定は効かず、デフォルトの『baseline』になる。

そもそもbaselineって何よの話。

つまりはココ。上の画像の緑のライン部分。
日本語だとあまり気づかないのだが、英語の場合、gとかjとかqとか、baselineより下に来る文字がある。それらの文字の一番したのラインがbottomの位置になるというわけ。

2007年03月28日 01:20 | Red | パーマリンク