display
画面にどのように表示されるかを設定する。
主に、JavaScriptで値を設定して、表示、非表示を動的に切り替えるのに使用します。
非表示にした場合、visibilityと違い表示領域ごとなくなる。
書式
display:値値には
| block | ブロック要素 |
| inline | インライン要素 |
| none | 表示しない |
| inline-block | インラインブロック |
| inline-table | インラインテーブル |
| list-item | リスト要素 |
block,inlineは通常表示で、
noneだと非表示になり、領域も確保されなくなる。
inline-block,inline-tableは、バージョン3未満のFirefoxが対応していないので注意。
他の主要ブラウザでは多少バージョンが古くても対応しているので、
バージョン3未満のFirefoxのみならほとんどの場合無視してもいいと思う。
inline-blockは、インラインに表示するブロック要素となり、
横幅や高さが確保されるインライン要素が作れる。
IEではブロック要素に指定しても有効にならない。
<span>などのインライン要素に指定してインラインブロックにする。
inline-tableは、<table>に使う。
<table>は通常ブロック要素として表示されるが、インライン表示になる。
inline-block,inline-tableは、Firefoxではインライン要素の上端で位置揃えされるが、
IEでは下端で位置揃えされる。
ブロック要素で高さを確保する場合、ずれないようにするには、同時にvertical-align:top;やbottomを指定した方がいい。
list-itemは通常のリスト要素と思うが、よくわからんし、使い道もわからない。