上下マージンの取り方（CSS）

スタイルシート（CSS)に携わる方々へ、
皆様の知恵を拝借したく、質問させていただきます。

段落間（P,UL等）の上下マージンの取り方についての質問です。

（A）予め段落の上マージンをゼロにリセットし、段落間は下マージンで操作
　例：
　p,ul { margin-top:0; margin-bottom:1em; } /* リセット */
　.hoge { margin-bottom:0.5em; } /* 上の段落に指定 */

（B）予め段落の下マージンをゼロにリセットし、段落間は上マージンで操作
　例：
　p,ul { margin-top:1em; margin-bottom:0; } /* リセット */
　.hoge { margin-top:0.5em; } /* 下の段落に指定 */


サイト構築において、（A）か（B）で悩んでいます。
皆様の意見を「具体的な理由」もあわせてお教え下さい。

No.1 回答者： reggaepunc 回答日時： 2009/07/17 21:37

結論からいうと、どっちを選んでもメリット、デメリットの確率は５０％だと考えられます。

Aの方法だと、上のマージンを消したいときに上のマージンを消さなければならないし、Bの方法も下のマージンを消したいときに下のマージンを消さなければならない、というのは当然ですね。

Aだと上に要素を追加した時は自動的にマージンが取られているから新たにマージンを取る必要はないですが、下に要素を追加する場合は新たにクラスを指定するなりしなければなりません。
Bはまた同じですね。

A、Bどちらを採用するかは作成者or運営者の好みであり、作成するサイトの構造に依存するでしょう。
既存コンテンツの下にコンテンツを追加していくならBが（若干ですが）楽になるし、上にコンテンツを追加していく場合ならAを採用すると思われます。

この回答へのお礼

ご回答ありがとうございます。

ちなみにreggaepunc様は、現在どちらの方法をよくお使いになられていますか？

お礼日時：2009/07/21 18:23

No.2 回答者： noname#100277 回答日時： 2009/07/17 22:39

コンテンツの内容次第でしょう。

ドチラでも構わないと思います。

この回答へのお礼

ご回答ありがとうございます。

多くのサイトで流用できる「基本CSSセット」を作りたいのですが、その場合様々なケースで対応できるような設定が必要だと思います。

その上で、より汎用的に作るなら、aides様は、上と下、どちらをお考えになられますでしょうか？

お礼日時：2009/07/21 18:31

No.3 回答者： noname#119957 回答日時： 2009/07/18 16:00

その前に、CSSでは、基本的に、全てのマージン・パディングを0にリセットすることから作業を始めます。

cssの最初に
* {
　margin:0;padding:0;
}
をいれて全てゼロにリセットして置かないとブラウザによりこの規定値が異なりますので、ブラウザ毎にばばらばらの位置指定となって具合が良くないと思います。

この回答へのお礼

ご回答ありがとうございます。

>ゼロにリセットして置かないとブラウザによりこの規定値が異なりますので

確かにそうですね。
ただ、ken_tyan様も上下の段落に間隔を取りたい場合があると思います。その場合、やはり段落の上か下にマージンを設定する必要が出てきますよね。

ken_tyan様は、間隔の調整は、上と下、どちらでとる事が多いですか？

お礼日時：2009/07/21 18:51

No.4 回答者： noname#119957 回答日時： 2009/07/21 23:40

間隔の調整は、上と下、どちらでとる事が多いですか？

＞＞
いままで、pとulで同じマージンを設定することはありませんでしたのでこのＣＣＳの意味自体がわかりません。（リセットは最初に全部に対して行う：この方法はＭＤＮの解説書なんかで常識的に解説されていますね^^）
メインのＣＳＳファイルでマージンとパッディングを0にセットしてから・・・

<p class="box1"></p>
<ul id="navi"><li></li></ul>
などの場合は、それぞれで形が別なので、独立したプロパティーとしていましたね。この場合、共通してｐにプロパティーを与えるとフォントを変えたり、いろいろできますが、実質上こういうのは、めんどうなので、＃wrapperとかbodyで一括に記述していましたね。。

No.5 回答者： reggaepunc 回答日時： 2009/07/23 00:31

僕は最近はマージンはマージン。

パディングはパディング。
横幅は横幅でクラスを小分けにすることが一番多いですね。

htmlはクラスだらけになりますが、
あとでレイアウト修正になったときにcssだけいじれば、大抵は力技でなおってますかね。

事前にディレクターの本音はそれとなく探っておいて決める場合もありますw