　はじめに

CSSを勉強してて、ボックスモデルを説明できるように簡単にまとめてみました。

コンテントボックスとは

実際の横幅と高さ
基本はwidthとheight

html

<div class="box">ボックススタイルブロック</div>

css

.box {
  /* background-color: green; */
  /* Content Box*/
  width: 200px;
  height: 200px;
}

パディングボックスとは

コンテントボックスから外側までどのくらい空けるか
padding:上　右　左　下の順で書く(ショートハンドという)

html

<div class="box">ボックススタイルブロック</div>

css

.box {
  background-color: green;

  /* Padding Box */
  padding: 8px 10px 15px 30px;
}

マージンボックスとは

他の要素からどのくらい空けるか

html

<div class="box">ボックススタイルブロック</div>

css

.box {
  background-color: green;

  /* Margin Box */
  margin: 8px 10px 15px 30px;;
}

マージンの相殺とは

マージが重なると値が大きいほうが優先される
下記のコードの場合margin-topの値が大きいため、margin-top: 40px;が適用される

html

 <div class="box">ボックススタイルブロック</div>
 <div class="margin">マージン相殺用の説明のブロック</div>

css

.box {
  background-color: green;
  margin-bottom: 20px;
}

.margin {
  background-color: blue;
  margin-top: 40px;
}

ボーダーボックスとは

border: 先の太さ線の種類線の色と書く

html

 <div class="box">ボックススタイルブロック</div>

css

.box {
  background-color: green;
  /* Content Box*/
  width: 200px;
  height: 200px;

  /* Border Box */
  border: 5px solid black;
}

Box-Sizing プロパティについて

ボーダーとパディングの値が加わって、実際の指定した値よりも大きくなることがある。これは、直感的ではないのでBox-Sizing プロパティを使うと良い
Box-Sizingプロパティをつかうとwidthとheightで指定した大きさになる
MDNのドキュメント　CSS ボックスモデルの代替

html

 <div class="box">ボックススタイルブロック</div>

css

.box {
  background-color: green;
  /* Content Box*/
  width: 200px;
  height: 200px;

  /* Padding Box*/
  padding: 8px 10px 15px 30px;

  /* Margin Box */
  margin: 8px 10px 15px 30px;

  box-sizing: border-box;
}