[CSS]marginとpaddingについて

ブログのCSSを編集しています。
marginとpaddingの違いがいまいち分かっていなかったので、いろいろなCSS講座サイトを見て回ったのですが、少し混乱して来ました…。
自分なりに以下のような結論を出したのですが、何か問題はありますでしょうか。

■marginとpaddingは要素にボーダー・背景色を使用しない限り、表示に違いはない。
■marginはIE6などでレイアウトが崩れる場合や、ブラウザによって相殺が起きたり起きなかったりする場合もあるので、余白は全てpaddingで指定する。
■ページ全体の設定はデフォルトで margin:0px と padding:0px とし、余白のいらない要素には何も記述しない。(CSSをスッキリさせたいので)
■ページ全体のセンタリングは、 margin:0px auto とする。(どのサイズのスクリーンで見ても、真ん中にくるようにしたいので)

ネガティブマージンは使用しません。
また、各エリアやテキストに、ボーダーと背景色は使用していません。
表示に違いがないのであれば、出来れば余白は全てpaddingに統一したいのです。(統一した方が気持ち良いので)
この解釈で合っているか、教えてもらえると助かります。
よろしくお願いいたします。

No.4 ベストアンサー 回答者： ORUKA1951 回答日時： 2013/02/23 10:30

■で書かれている項目はすべて間違った認識です。

■marginとpaddingは要素にボーダー・背景色を使用しない限り、表示に違いはない。
　ブラウザ(ユーザーエージェント)は、それぞれスタイルシートを持っています。
　⇒A. HTML 4.0におけるスタイルシートの例( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2 … )
　また、指定がない場合のデフォルト値も定められています。
　⇒初期値（Initial）( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2 … )


■marginはIE6などでレイアウトが崩れる場合や、ブラウザによって相殺が起きたり起きなかったりする場合もあるので、余白は全てpaddingで指定する。
margin,padding,width,height,border-widthの相互関係は、仕様書の
　⇒8. ボックスモデル( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2 … )
をよんでください。block要素とinline要素で変わります。
　IEの互換モードでは、ボックスモデルの場合border辺の内側が内容サイズになりますが、他のブラウザは仕様書どおりpadding辺の内側です。
　そのため、doctypeスイッチ - Google 検索( https://www.google.co.jp/search?q=DOCTYPE%E3%82% … )でブラウザが標準モードで動作するようにすれば、ブラウザ間の誤差はある程度解消できます。

　また、paddingが問題になるのですから、paddingを極力使用しないほうが良いです。

■ページ全体の設定はデフォルトで margin:0px と padding:0px とし、余白のいらない要素には何も記述しない。(CSSをスッキリさせたいので)
　これも典型的な誤りです。
　使われるスタイルシートはCSS(カスケーディングスタイルシート)だと思いますが、CSSの最大の利点はカスケーディングです。すなわち、出所、優先順位、詳細度などをあわせた仕組みです。--これを理解しないでmargin,paddingというプロパティに手をつけるのはダメですよ。

　ブラウザがデフォルトで持つスタイルシート
　⇒A. HTML 4.0におけるスタイルシートの例( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2 … )
　は優先度--詳細度0--ですが、それをすべて0にしてしまうとブラウザが持つスタイルシートをすべて書き加えなければなりません。
　これこそスタイルシートを煩雑にする最大の理由なのです。

「表示に違いがないのであれば、出来れば余白は全てpaddingに統一したいのです。」
　必ずmarginを使用しましょう。また必要なとき必要に応じて指定しましょう。

■ページ全体のセンタリングは、 margin:0px auto とする。(どのサイズのスクリーンで見ても、真ん中にくるようにしたいので)

　⇒左側に設置したバナーの縦の長さを小さくしたいです - HTML - 教えて！goo( http://oshiete.goo.ne.jp/qa/7953410.html )
のNo.1で回答した内容を見て画像を用意して
　⇒左側のバナーの背景色を、任意の色に変更したいです。 - HTML - 教えて！goo( http://oshiete.goo.ne.jp/qa/7953557.html )
　のNo.2のスタイルシートを適用してみてください。

　スマホでも幅広ディスプレイでも中央に表示されるはずですが、HTMLのスタイルシート指定で
<style type="text/css" media="screen">
としておくと、印刷には適用されません。

この回答へのお礼

ひとつひとつご丁寧に解説して頂き、ありがとうございます。
とても参考になり、また大変勉強になりました。
自分が思っていたほど、簡単なものではなかったのですね…。
難しいですが、教えて頂いたリンク先などをよく読み、理解を深めようと思います。
ありがとうございました。

お礼日時：2013/02/23 20:26

No.3 回答者： nanden1548 回答日時： 2013/02/23 08:30

回答を見ていると前回答が正しいと思われますが、まずはブラウザのリセットＣＳＳを記述すれば、ブラウザの違いによる問題は解決します。

ＩＥの対応が一番遅いことを知っていますか？・・・・
特にＩＥ６はひどい！・・・ＩＥ１０になると、だいぶ改善されています。

参考までに、レイアウトを行う場合には、div要素を使い、margin、paddingなどは、一切指定しない。
<p>要素、<q><blockquote><ul><ol><dl>要素など<div>要素に包括される、要素に適用する。
これで、レイアウトは簡単にできると、思います。
ＩＥのバグに対しては、ハックを、あてると簡単です。

http://ie7-js.googlecode.com/svn/version/2.1(bet …

まずは、W3Cの仕様書を読み正しく理解することから始めては、いかがでしょうか？

参考URL：http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401 …

この回答へのお礼

ありがとうございます。
ブラウザのリセットCSSとは、*で記述することですか？
賛否両論のようですが、これは出来ればあまり使いたくないと思っています…。
仕様書…難しいですね；
でも少しずつ読んでみます。ありがとうございました。

お礼日時：2013/02/23 20:07

No.2 回答者： Yune-Kichi 回答日時： 2013/02/23 02:38

margin : 一番の外側の余白領域。

背景は常に透過。
border : marginのひとつ内側の領域。
padding : borderのひとつ内側の領域で，contentのすぐ外側の余白領域。

というか，CSSのspecificationに図があるのですが……。
http://www.w3.org/TR/CSS21/box.html#box-dimensions

この回答への補足

最後にひとつ、これだけ教えてもらってもよろしいでしょうか。
例えばmarginやpaddingを指定しないのであれば、0pxなどとせず何も書かなくても良いんじゃないかと思うのですが、ブラウザによっては初期値が0ではないものもあるとどこかで見ました。
そこで、

HTML{
margin:0px;
padding:0px;
}

body{
margin:0px;
padding:0px;
}

としておいて、余白を入れるところのみmarginやpaddingを書こうと思っています。
これで大丈夫でしょうか。

補足日時：2013/02/23 03:46

この回答へのお礼

ありがとうございます。
説明不足で聞きたいことが上手く伝えられませんでしたが、なんとなく掴めてきました。
おっしゃる事をよく考え、実際にmarginとpaddingそれぞれで記述した場合を比べてみて、違いも解ってきました。

お礼日時：2013/02/23 03:22

No.1 回答者： noname#174809 回答日時： 2013/02/23 01:33

全然あかんです。

この回答へのお礼

ご回答ありがとうございます。
すみませんが、どうダメなのか具体的に教えてもらえるととても助かりますm(_ _)m

お礼日時：2013/02/23 02:00