【CSS】ボックスモデルとは 〜マージンとパディングの違い〜

　はじめに

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;
}