2
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Posted at

# はじめに
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;
}
2
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?