最も混乱しやすいCSSの概念の一つ、ボックスモデルの挙動をリアルタイムで確認できるツールです。
padding、border、marginの値を変更して、要素がどのように広がるか、また他の要素との距離がどう変化するかを視覚的に理解しましょう。Kindle版（第3章）で学んだ理論をここで実践的に試してみてください。
【CSS Box Modelの構成】
- Margin (外側の余白)
- Border (境界線)
- Padding (内側の余白)
- Content (内容物)
設定（単位: px）
要素の合計サイズ (Overall Size)
幅: 0px
高さ: 0px
Margin: 30px
Border: 10px
Padding: 20px
Content: 200 x 50 px