2.1 内部余白 (Padding)
内部余白 (padding) は、要素のコンテンツとその境界の間のスペースを定義するんだ。 padding は、
要素の各辺に対して設定できるよ: 上、右、下、左ね。内部余白は、要素のコンテンツが境界にぴったりくっつかないように、
周りにスペースを作るのに役立つよ。
使用例
この例では、クラス .padding を持つ要素に、すべての側面に20ピクセルの内部余白を適用して、
コンテンツの周りにスペースを作っているんだ。
CSS
.padding {
background-color: #e0e0e0;
padding: 20px;
border: 2px solid #000;
}
HTML
<div class="padding">
これは内部余白がある要素です。
</div>
2.2 外部余白 (Margin)
外部余白 (margin) は、要素と隣接する要素の間のスペースを定義するよ。外部余白も、
要素の各辺に対して設定できるんだ: 上、右、下、左ね。外部余白は、要素の重なりを避けるために、
要素間のスペースを作るのに便利なんだ。
使用例:
CSS
.margin {
background-color: #e0e0e0;
border: 2px solid #000;
margin: 20px;
}
HTML
<div class="margin">
これは外部余白がある要素です。
</div>
2.3 ブロックモデルコンポーネントの相互作用
ブロックモデルの4つのコンポーネント（コンテンツ、内部余白、境界、外部余白）はすべて一緒に動作して、 要素のページ内での全体のサイズと配置を定義するんだ。
コンポーネントの相互作用例:
CSS
.box {
background-color: #e0e0e0;
padding: 20px;
border: 5px solid #000;
margin: 30px;
width: 200px;
}
HTML
<div class="box">
これは外部余白と内部余白がある要素です。
</div>
コードの説明:
- コンテンツ: 要素内のテキスト
- 内部余白: 20ピクセル、コンテンツと境界の間のスペースを作る
- 境界: 5ピクセル、要素を囲む
- 外部余白: 30ピクセル、要素と他の要素の間のスペースを作る
2.4 負の外部余白
外部余白は負の値を持つことができ、これにより要素が重なってしまうことがあるんだ。
CSS
.negative-margin {
background-color: #e0e0e0;
padding: 20px;
border: 2px solid #000;
margin-top: -12px;
}
HTML
<div>
これは通常の要素です
</div>
<div class="negative-margin">
これは負の上余白がある要素です。
</div>
2.5 外部余白の崩壊
2つの隣接するブロックの垂直外部余白が出会うと、それらは崩壊し、2つのうち大きい方に等しい単一の余白を形成するんだ。
CSS
.box1 {
background-color: #e0e0e0;
padding: 20px;
border: 2px solid #000;
margin-bottom: 30px;
}
.box2 {
background-color: #d0d0d0;
padding: 20px;
border: 2px solid #000;
margin-top: 20px;
}
HTML
<div class="box1">
これは最初の要素です。
</div>
<div class="box2">
これは2番目の要素です。外部余白は30ピクセルに崩壊しました。
</div>
GO TO FULL VERSION