dt と dd を横並びのサンプル その2

この文書は、Lucky bag::blogのエントリー「dt と dd を横並び」のサンプルです。

最初に全称セレクタを使って全ての要素を margin: 0; padding :0; line-height: 1.6; としている。

デフォルトの状態

定義用語
定義用語の説明。定義用語の説明。定義用語の説明。定義用語の説明。定義用語の説明。定義用語の説明。定義用語の説明。定義用語の説明。
定義用語
定義用語の説明。定義用語の説明。定義用語の説明。定義用語の説明。定義用語の説明。定義用語の説明。定義用語の説明。定義用語の説明。

display: table; を使った方法

定義用語
定義用語の説明。定義用語の説明。定義用語の説明。定義用語の説明。定義用語の説明。定義用語の説明。定義用語の説明。定義用語の説明。
定義用語
定義用語の説明。定義用語の説明。定義用語の説明。定義用語の説明。定義用語の説明。定義用語の説明。定義用語の説明。定義用語の説明。
#case04 dl {
        display: table;
}
#case04 dt {
        display: table-cell;
        width: 5em;
}
#case04 dd {
        display: table-cell;
}