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