display要素の主な値による見え方の確認用。横600px、縦60pxのボックス(薄いグリーン)の中に、spanで囲ったダミーテキストを3つ、横に並べて配置しています(オレンジ色のボーダー)。サンプルごとにspanに指定したdisplay要素の値を変更しています。各spanは、heightを30px、marginを5pxに指定しています(サンプル1のみmargin:0)。 インライン要素のspanは、横方向のmarginは効きますが、縦方向のmargin、高さは指定しても無視されます。display要素の値を操作して、縦方向のmargin、高さを有効にすることができます。

サンプル1[ display: inline; ]

inline(margin無し) ダミーテキスト1ダミーテキスト2ダミーテキスト3

サンプル2[ display: inline; ]

inline(margin有り) ダミーテキスト1ダミーテキスト2ダミーテキスト3

サンプル3[ display: block; ]

block  ダミーテキスト1ダミーテキスト2ダミーテキスト3



サンプル4[ display: inline-block; ]

inline-block   ダミーテキスト1ダミーテキスト2ダミーテキスト3

サンプル5[ display: table; ]

table   ダミーテキスト1ダミーテキスト2ダミーテキスト3



サンプル6[ display: inline-table; ]

inline-table   ダミーテキスト1ダミーテキスト2ダミーテキスト3

サンプル7[ display: table-cell; ]

table-cell   ダミーテキスト1ダミーテキスト2ダミーテキスト3

サンプル8[ display: list-item; ]

list-item   ダミーテキスト1ダミーテキスト2ダミーテキスト3



戻るボタン