cssで作成するロールオーバーイメージのdisplay:blockとt

cssで作成するロールオーバーイメージのdisplay:blockとtext-indentについて。

web初心者です。cssで作るロールオーバーを勉強しています。
なんとなく理解でき、上手く表示されるのですが、いまいちわからない所があります。。。

まずなんでa要素をブロックにするのかということです。

もう一つが、text-indentなのになぜimg要素が画面外に飛ばせるのかということです。

よろしくお願いします。

No.1 ベストアンサー 回答者： kuzumiHK 回答日時： 2010/08/21 23:57

＞まずなんでa要素をブロックにするのかということです。

ブロックにしないと、widthやheightなどの値が安定して効かないからでしょう。
a要素の縦横が安定しないと疑似クラスを効かせるときにも不安定です。

また、html上では文法上使うべきタグ要素を使いつつ、
視覚的にはどんなレイアウトにも対応できるように、どんなタグ要素でも
ブロック要素に変更できるようにするのがcssの役割ですので問題ないはずです。

＞もう一つが、text-indentなのになぜimg要素が画面外に飛ばせるのかということです。

img要素は、現在のhtmlのなかではテキストと同じ挙動で実装されています。
（width、heightを固定値で持つこと以外は）
ブラウザの実装状況で必ずそうなるとは限らないかもしれませんが、
今の実装の中ではテキストと同じ挙動をなることはおかしくないと思います。
でないと、テキストの途中に書かれたimg要素がtext-indentをつける度に、
ずれて表示されてしまい、使い方自体が限定されてしまいそうです。

http://rikiy.jp/report/css/20070220.htmlから引用
＞「ライン（行）の中で使用でき」「前後に改行を作らない」、inline要素としての条件は満たしているのだから。