ボックスモデル

HTML要素は、content、padding、border、margin の層を持つ箱として配置されます。

このLessonのゴール

• ボックスモデルを構成する4つの領域を説明できる
• paddingとmarginを使い分けてカードの余白を調整できる
• box-sizing: border-boxを使って要素の幅を管理できる

今回新しく作るファイル

前の練習を残したまま比較できるよう、次のファイルを新しく作ります。

with-cafe/practice/css/
├── 02-box-model.html
└── 02-box-model.css

02-box-model.htmlから02-box-model.cssを読み込みます。本体のWith Caféファイルはまだ編集しません。

<link rel="stylesheet" href="../../css/reset.css" />
<link rel="stylesheet" href="02-box-model.css" />

ブラウザで確認するファイル

02-box-model.htmlをブラウザで開きます。HTMLまたはCSSを変更するたびに、両方のファイルを保存してブラウザを再読み込みしてください。

次のHTMLにカードの構造を記述します。

<article class="card">
  <h2>バタークロワッサン</h2>
  <p>国産発酵バターを使って焼き上げます。</p>
  <a href="#menu">メニューを見る</a>
</>