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

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

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

デフォルトの状態

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

case:1 float を使った方法

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

#case01 dt {
        float: left;
        width: 5em;
}
#case01 dd {
        margin-left: 5em;
}

case:2 margin を使った方法

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

#case02 dt {
        width: 5em;
}
#case02 dd {
        margin-left: 5em;
        margin-top: -1.6em;
/* margin、padding は 0 なんで dt、dd それぞれの line-height 値の半分を足した値をマイナス */
}

case:3 position を使った方法

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

#case03 dt {
        width: 5em;
        position: absolute;
        left: 40px; /* body に指定している padding: 40px; と同値 */
}
#case03 dd {
        margin-left: 5em;
}