ボックスとは
要素は「四層でできた一つの箱（ボックス）」として扱うと覚えればレイアウトが理解しやすくなります。CSSにおけるボックス要素は「ここから → ここまで」で範囲が決まり、ひとつの箱に入れるイメージになります。ボックスは、特定の範囲をひとつのグループにし、「ブロック要素」として、ひとまとまりで扱えるようにします。
ボックス要素は、 内容(content)、余白(padding)、境界線(border)、外側の余白(margin) の四つの層が重なってひとつのボックスを構成します。このボックスモデルを理解することで、要素の幅・高さ・位置の調整や、隣接する要素との間隔（レイアウト）を正確に制御できるようになります。
資料を見る▶︎
ボックスの定義
ボックスには、上・右・下・左の４辺を定義することができます。
ボックスに関するプロパティ
| 余白(margin/padding) | 余白には、(内側・外側)とがあります。 |
|---|---|
| ボーダー(border) | ボックスは、線(ボーダー)を引くことができます。 |
margin・padding
ボックスには、上下左右それぞれに、内側(padding)と外側(margin)に余白を持つことができます。
余白について補足
セクションボックスだけでなく、タグによるブロック要素にも、余白を持つことができます。
ショートハンド
余白による指定は、ショートハンド(短く短縮)で記述することが可能です。4辺それぞれ個別にサイズが異なる場合は、時計回りに(上右下左)スペースで区切って記述します。
4箇所を指定するショートハンド：上100px,右20px,下40px,左50pxの余白
margin:100px 20px 40px 50px2箇所を指定するショートハンド：上下100pxの余白,左右20pxの余白
margin:100px 20px;3箇所指定するショートハンド：上100px,左右20px,下10pxの余白
margin:100px 20px 10px;border
ボックスに、枠線を入れることができます。枠線（border）は、3つの指定「太さ（width）」「線の種類（style）」「色（color）」で構成されます。順番に決まりがあるわけではなく、理解しやすい順に紹介して構いません。
| border-style | 枠線の種類 |
| border-width | 枠線の太さ |
| border-color | 枠線の色 |
ショートハンド
ボーダーによる指定は、ショートハンド(短く短縮)で記述することが可能です。スペースで区切って記述します。これらの指定が揃ってボーダーが出現しますので、一つでも欠けるとボーダーは表示されません。
border:solid 1px #0000;