定義リストdlで改行したときにddの頭の位置を揃える

    
リンゴ
    
皮が赤い種類が多いが、
黄緑色や黄色の種類もある。
    
みかん
    
こたつのお供。食べすぎると手が黄色くなる。
    
バナナ
    
昔は高級品だったらしい。
    
キウイ
    
毛がフサフサしている。
    
ぶどう
    
種ごと食べるとヘソから芽が出てくるらしい。

dl {
    margin: 20px;
    padding: 10px;

    border: 1px solid #000;
}

dt {
    padding: 5px;
    border: 1px solid #f00;

    /* 幅を指定する */
    width: 100px;



    /* dtとdlを横並びにする */
    float: left;

    /* 行ごとにmarginを取るときは、dtとddの両方にmargin-bottomが必要 */
    margin-bottom: 5px;
}

dd {
    padding: 5px;
    border: 1px solid #00f;

    /* dtの幅と同じだけmargin-leftをとると、改行したときにddの頭の位置が揃う */
    margin-left: 100px;



    /* 行ごとにmarginを取るときは、dtとddの両方にmargin-bottomが必要 */
    margin-bottom: 5px;
}