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