CSS外部ファイルのレイアウト基本設定について

質問

ＷＥＢを勉強中です。
ＭｄＮを見てＣＳＳ外部ファイル設定にこうありました。

body{margin:0;padding:0;color:#ffffff;background:#334455;}

#wrapper{color:#000000;background:#ffffff url(img/web-153.jpg) repeat-y right;}

#wrapperというのはよく#containerとも名づけられ使われているもので
この中にナビゲーションや段組みレイアウトなどを使って
コンテンツを入れる、bodyのすぎ下に入れ子になっているものです。

なぜbodyにcolorとbackgroundの設定があるのに#wrapperにも
colorとbackgroundの設定があるのでしょうか？？

また、bodyにmargin:0;padding:0というのは必ず設定するもの
なのでしょうか？？

回答No.1

leap_day · ベストアンサー

こんにちは

body { }の方はページ全体に適用させているもので
#wrapper { } の方はid="wrapper"の中だけに適用させているものです

ですので仮にid="wrapper"がwidth="100%" height="100%"でページ全体を覆っているのであればbody { } の方に書いても同じです

ですがid="wrapper"が100％以下の場合にそのほかのコンテンツとかにCSSを適用させる為にbody { } の方に設定をするのです

margin:0;padding:0は画面いっぱいに使いたいときに使用する
無ければ上下左右数px位の余白がありますので

お礼

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

非常にわかりやすいご説明で一発で理解できました！
margin:0;padding:0はブラウザの持つデフォルトの設定を
消すということですかね。

どうもありがとうございました。