found]基礎と言いつつも、margin、paddingの記述の仕方は省略しています。(そういったページはたくさんあるもので。)実際に使う時の考慮点を中心に記載したいと思います。余白を設定margin、paddingともに余白を設定するものです。何も指定しない状態でコードを書いてみます。#ccffcc;}表示結果A-Boxの外側に少しスペースが空いていると思います。これはbodyタグに対してpaddingが設定されているためです。余白の初期化ページを制作するにあたりデフォルトの余白は邪魔なものです。スタイルシートの先頭で初期化してしまいましょう。#ccffcc;}1~5行目までで関連するタグの余白を初期化(0pxに設定)しています。bodyタグは9行目にもあります、スタイルシートは上の行から順番に適用されるため、まずは余白が初期化され、次に背景色が設定されます。2行目にあるように複数のタグに対して同じ設定をする場合はカンマで区切って定義できます。実際に余白を定義してみます。#ccffcc;}表示結果:A-BOXに対していmarginを20px(16行目)、paddingを20px(17行目)設定しています。これにより余白が作られました。ここで注意したいのが、親要素(今回の場合はbodyタグ)に対してpadding値が設定されている場合、想定よりも広い余白ができてしまいます。デザインを作成する場合には余白のサイズに加えて、marginで設定するか?paddingで設定するか?をもしくは両方で設定するか?を明確にしてからコーディングに入った方が良いです。余白の自動調整marginに対して「auto」という値を指定することで余白を自動調整することができます。#ccffcc;}16行目で左右の余白に対して「auto」を設定しています。これにより余白は自動的に設定されます。これは対象要素に対してwidth指定されている場合に限ります。今回は左右ともにautoにしましたが、例えば右側だけを固定ピクセルとして、左側を「auto」で自動調整するといったことも可能です。コメントをキャンセルメールアドレスが公開されることはありません。