inline-blockとinline-table
CSSのdisplayに、inline-blockとinline-tableというものがあります。
両方とも、指定するとブロック要素になりますが、
通常のブロック要素の場合、前後の文章などは上下になりますが、
通常のインライン要素のように前後の文章などのインライン要素が横に並びます。
inline-block
前の文章↓実際の表示↓
<span style="display:inline-block;width:250px;border:1px solid black">ブロック要素</span>;
後ろの文章
前の文章ブロック要素後ろの文章
↑実際の表示↑
通常のブロック要素では、前後の文章は上下に表示され、横に並べられません。
通常のインライン要素では、widthが無効で、横幅の確保ができません。
両方を解決したい時に使います。
例では<span>タグをインラインブロック化していますが、
インラインタグでもブロックタグでも有効です。
ただし、
IEではブロック要素に指定しても有効にならないようなので、インラインタグをインラインブロック化したほうがいいようです。
floatで横に並べる場合はclearに気をつけなくてはいけませんので、
横に並べるのにfloatよりも便利かも。
inline-table
前の文章↓実際の表示↓
<table style="display:inline-table;border:1px solid black">
<tr><td>1-1</td><td>1-2</td></tr>
<tr><td>2-1</td><td>2-2</td></tr>
</table>
後ろの文章
前の文章
| 1-1 | 1-2 |
| 2-1 | 2-2 |
↑実際の表示↑
<table>タグはブロック要素ですが、inline-table指定するとインライン表示ができます。
inline-block、inline-table
共に、インライン1行分の高さなら問題ありませんが、
複数行の高さがある場合は、
Firefoxではインライン要素の上端で位置揃えされるが、IEでは下端で前後の文章と位置揃えされてしまいます。
高さがある場合は、同時にvertical-align:top;やbottomを指定した方がいいです。