実践的な方法でボックスモデルを理解する
メニューを表示するにはスワイプしてください
HTML要素は、ウェブページ上で長方形のボックスとして表示されます。各要素には、コンテンツ領域、パディング、ボーダー、マージンがあります。
ボックスモデルの4つの構成要素
コンテンツ
コンテンツ領域にはテキスト、画像、または他の要素が含まれます。 これは要素の内側に見える部分です。
パディング
パディングは、コンテンツとボーダーの間のスペース。 内部の余白を作成。
.box {
padding: 20px;
}
パディングは要素の見た目のサイズを大きくする。
ボーダー
ボーダーはパディングとコンテンツを囲む。
.box {
border: 4px solid darkblue;
}
デフォルトではボーダーの幅は0で、色を指定しない場合はテキストカラーと同じになる。
マージン
マージンはボーダーの外側のスペース。 要素間の距離を作成。
.box {
margin: 40px;
}
マージンは要素の背景色に影響しない。
index.html
styles.css
この例では：
- 背景はコンテンツ領域とパディング領域を塗りつぶす；
- ボーダーはそれらを囲む；
- マージンはボックスの外側にスペースを作る。
注意
デフォルトで、いくつかの要素にはあらかじめ設定された padding および margin プロパティがある。これは、スタイルがなくてもウェブページが読みやすくなるように設計されている。
重要
ボックスモデルは、要素がページ上で占めるスペースを決定。
要素の合計サイズは、コンテンツサイズ、パディング、ボーダー、マージンによって決まる。
すべて明確でしたか？
フィードバックありがとうございます！
セクション 3. 章 1
AIに質問する
AIに質問する
何でも質問するか、提案された質問の1つを試してチャットを始めてください
セクション 3. 章 1
