ボックスモデルとは？
CoddyのHTMLジャーニー「Styling with CSS」セクションの一部 — レッスン 33/76。
CSSでは、すべてのHTML要素はボックスモデルに従い、長方形のボックスとして扱われます。このモデルは、主に4つの部分で構成されています：
- コンテンツ – ボックス内の実際のテキスト、画像、またはその他のコンテンツ。
- パディング (Padding) – コンテンツとボーダー（境界線）の間の余白です。要素のサイズを大きくしますが、背景色はパディング部分にも適用されます。
- ボーダー – パディングとコンテンツを囲む線です。さまざまなスタイル、色、太さを設定できます。
- マージン – 要素を他の要素から隔てる、ボーダーの外側のスペース。
ボックスモデルを理解することは、ウェブデザインにおける余白やレイアウトの制御に役立ちます！ 🚀
チートシート
CSSボックスモデルは、すべてのHTML要素を4つの部分からなる長方形のボックスとして扱います：
- Content – ボックス内の実際のテキスト、画像、またはその他のコンテンツ
- Padding – コンテンツとボーダーの間の余白
- Border – パディングとコンテンツを囲む線
- Margin – ボーダーの外側の、要素を他の要素から隔てる余白
自分で試してみよう
このレッスンにはコードチャレンジは含まれていません。
腕試しこのレッスンには短いクイズがあります。レッスンを始めて解答し、進捗を記録しましょう。
