Oct. 12th,2018
＃
“ボックスモデル”とは？
CSSでは要素は以下の4つの領域から構成される長方形の“ボックス(box)”として描画され、この構成は“ボックスモデル(box model)”として定義されています。
- “コンテント・ボックス(content box)”
- 要素の子要素などのコンテンツが描画される領域
- “パディング・ボックス(padding box)”
- 要素の境界線の内側の余白(パディング)を外縁とする領域
- “ボーダー・ボックス(border box)”
- 要素の境界線を外縁とする領域
- “マージン・ボックス(margin box)”
- 要素の境界線の外側の余白(マージン)を外縁とする領域
要素に“width”プロパティや“height”プロパティを適用してその寸法を指定するとき、既定では指定した寸法はコンテント・ボックスの大きさとして計算されます。
＃
＃
要素の寸法を指定するプロパティ
コンテント・ボックス
| プロパティ | 説明 |
|---|---|
width: |
コンテンツの水平方向の寸法 |
min-width: |
コンテンツの水平方向の寸法の最小値 |
max-width: |
コンテンツの水平方向の寸法の最大値 |
height: |
コンテンツの垂直方向の寸法 |
min-height: |
コンテンツの垂直方向の寸法の最小値 |
max-height: |
コンテンツの垂直方向の寸法の最大値 |
パディング・ボックス
| プロパティ | 説明 |
|---|---|
padding: |
すべてのパディングの幅 |
padding-top: |
上のパディングの幅 |
padding-right: |
右のパディングの幅 |
padding-bottom: |
下のパディングの幅 |
padding-left: |
左のパディングの幅 |
ボーダー・ボックス
| プロパティ | 説明 |
|---|---|
border-width: |
すべてのボーダーの幅 |
border-top-width: |
上のボーダーの幅 |
border-right-width: |
右のボーダーの幅 |
border-bottom-width: |
下のボーダーの幅 |
border-left-width: |
左のボーダーの幅 |
以下のプロパティはボーダーの幅とともに見た目や色もまとめて指定することができます。
| プロパティ | 説明 |
|---|---|
border: |
すべてのボーダー |
border-top: |
上のボーダー |
border-right: |
右のボーダー |
border-bottom: |
下のボーダー |
border-left: |
左のボーダー |
マージン・ボックス
| プロパティ | 説明 |
|---|---|
margin: |
すべてのマージンの幅 |
margin-top: |
上のマージンの幅 |
margin-right: |
右のマージンの幅 |
margin-bottom: |
下のマージンの幅 |
margin-left: |
左のマージンの幅 |
