webデザイン dl dt ddの横並び指定

初歩的な質問失礼します。

webサイトの「ニュース」や「インフォメーション」の記述によくある
dl dt dd要素を使って、「日付、日時」をdtに、「内容、イベント」をddにマークアップして、floatで横並びにするレイアウトを作成していて、他のサイトを研究しながらなんとか形にできたのですが、正直ポイントがつかめていません。

なんとなく、(1) floatは<dt>に指定する。
　　　　　　(2)<dt>と<dd>の横の余白は、<dd>に<dt>幅分+空けたい分のpadding-leftを指定する。
(3)bottomにborderを指定したい場合は、<dd>に指定すると<dt>のbottomにもborderが表示される。

この三点はポイントなのかなー、と思ったのですが（いや、全然違うし。ってとこがあったら是非教えてください！！どうしてそうなのかも理由がよくわかってないんです。）

上下の余白の取り方もpaddingとmarginをいろいろ試して（結果両方使いました。）
思うような形に出来たのですが、全然理由がわかりませんでした。

dt ddを横並びにした時の左右、上下の余白の取り方を理由も含めて説明していただけないでしょうか？？

よろしくお願いします！

No.1 ベストアンサー 回答者： H240S18B73 回答日時： 2014/02/27 02:59

やっつけて言うと

回り込みというのは基本
テキストとインライン要素を避けさせるもので
ブロック要素は回り込みを避けない
ということです

それ故、ブロック要素は回り込みの要素を
まるで無い物のようにして重なってきます

この手法ではfloat:left;は回り込みという本来の目的ではなく
dtにブロック要素としての実体を失わせてddを上に重ねてしまう
というような目的で使われていると考えればわかりやすいかと思います

この回答へのお礼

とてもわかりやすい説明ありがとうございました！

お礼日時：2014/03/15 09:45

No.2 回答者： ORUKA1951 回答日時： 2014/02/27 10:09

その内容によってどれを使うか判断します。

・dtの内容は常にddよりheightが小さいか？
・線を新しいdt,ddの上に引きたいのか
・ddは複数あるのか、あるいはdd内に<p>があるのか
　一般的で、楽なのはddにmargin-leftを指定する方法ですね。
　他にも、
・display:inline-block;を使う
・float:leftとcontentを使用する
・absoluteで決め打ちする
　など、最適な物を選択します。

　どんなHTMLなのかがわからないと一律な方法はないでしょう。

この回答へのお礼

丁寧にご回答していただきありがとうございました。

お礼日時：2014/03/15 09:45