[CSS] 07. Margin & Padding

07-1. MarginとPadding
次に、要素に余白を設定できるmargin、paddingというプロパティを学習します.
すべての要素にはmargin、border、paddingのスタイルがあります.以下に示します.



上の図を説明すると、
オレンジ色はmarginエリア、上、右、下、左の計50 px
黄色はborder領域で、boderの厚さは5 pxです.
緑は充填領域、上、右、下、左の合計50 px
元素の横径は273 px,縦径は90 pxである
borderは次の授業で勉強します.
要素にborderスタイルがある場合は、境界が描画されます.
paddingはborder内に作成された領域です.
上図では、273 pxという横方向の値がpadding領域のマージの横方向の長さである.
marginはborderの外部で生成されたエッジです.
2枚目の写真に示すように、margin(オレンジ色)までの全横方向の長さは373 pxである.
273+50(左端)+50(右端)=373
純コンテンツ(青色領域)はpaddingとborderを除く長さであり、計算すると163 pxである.
273-50(左枠)-50(右枠)-5(左枠)-5(右枠)=163
cssは次のようになります.

p.example {
  width: 273px;
  height: 90px;
  margin: 50px;
  border: 5px solid black;
  padding: 50px;
}

07-2. margin
オレンジ色の領域のmarginスタイルをよく見てみましょう.

枠線外の余白はmarginです.

p.example {
  margin: 50px;
}

style.cssで作成したエッジには50 pxの値が与えられます.
元素の周囲に50 pxの領域が現れた.
上のcssは下図のようです.

p.example {
  margin: 50px 50px 50px 50px;
}

上、右、下、左のマージン値の順になります.
次のようにもう一度書きます.

p.example {
  margin-top: 50px;
  margin-right: 50px;
  margin-bottom: 50px;
  margin-left: 50px;
}

枠線内の緑の領域はpaddingです.
paddingもmarginに似ています.

p.example {
  padding: 50px;
}

次のようにもう一度書きます.

p.example {
  padding-top: 50px;
  padding-right: 50px;
  padding-bottom: 50px;
  padding-left: 50px;
}