img {vertical-align:text-bottom;}
何も指定しないと、この位置になる。「黶龠鬥」は文字の範囲をいっぱいに使用した字として使っている。
黶龠鬥鬥黶龠
小さい字だとわかりにくいので2倍の大きさにすると、文字よりも画像が少し上に位置していることがわかる。
黶龠鬥鬥黶龠
英字との関係をみるとその理由がわかる。
黶龠鬥dbyapqudbyapq
英字と組み合わせると下があって見える。pqyのような下に突き出る部分まで日本語の文字は使用しているのである。このacexなどの文字の下の線が上下の配置の基準になっている。これをbaselineとよぶ。
これはスタイルシートで、vertical-align:baseline
などにより、変更することができる。
黶龠鬥鬥黶龠dbyapqudbyapq top
黶龠鬥鬥黶龠dbyapqudbyapq text-top
黶龠鬥鬥黶龠dbyapqudbyapq middle
黶龠鬥鬥黶龠dbyapqudbyapq baseline
黶龠鬥鬥黶龠dbyapqudbyapq text-bottom
黶龠鬥鬥黶龠dbyapqudbyapq bottom
middleも英字だと真ん中に見えるが、日本の文字では字の方が少し上に見える。
日本語で文字の下の線が画像の下に合うというためには、baselineでなく、text-bottomと指定するのがよい。
その他このような指定もある。
黶龠鬥鬥黶龠黶龠鬥dbyapqudbyapqdbyapq sub
黶龠鬥鬥黶龠黶龠鬥dbyapqudbyapqdbyapq super
%はline-heightを基準に画像の下端を合わせる。0%が baseline のようである。
黶龠鬥鬥黶龠黶龠鬥dbyapqudbyapqdbyapq 100%
黶龠鬥鬥黶龠黶龠鬥dbyapqudbyapqdbyapq 50%
黶龠鬥鬥黶龠黶龠鬥dbyapqudbyapqdbyapq 0%
黶龠鬥鬥黶龠黶龠鬥dbyapqudbyapqdbyapq -50%
黶龠鬥鬥黶龠黶龠鬥dbyapqudbyapqdbyapq -100%
IEのバージョン5.0ではこの通りに行きません。次のようになります。
IEの2005年5月現在最新バージョンは6ですがまだ調査中。