全ての要素は表示領域とその境界線、余白があり、この3つを合わせた領域のことをボックスと呼びます。ボックスは共通して次のような構造になっています。
まずボックスには要素の内容(テキストなど)を表示するための領域があり、これが右図の内側の点線になります。
表示領域の周りにはボーダーと呼ばれる境界線があり、これはborderプロパティで表示できます。
また境界線の内側と外側は余白をとることができ、ボーダー内側の余白をpadding、外側の余白をmarginと呼びます。
図だけではイメージしづらいと思いますので、実際のWebページで境界線・padding・margin・表示領域がどの部分にあたるかサンプルを作成し解説します。
ファイル名:box.html,box.css
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>box</title>
<link rel="stylesheet" href="box.css">
</head>
<body>
<p>ボックス</p>
</body>
</html>
body {
border: solid 3px #000000;
margin: 0px;
padding: 20px;
}
p {
border: solid 3px #0000ff;
margin: 20px;
padding: 20px;
}
黒線がbody要素の境界線、青線がp要素の境界線となります。
marginやpaddingをCSSで指定しており、2つの境界線やボックスというテキストの間に余白があるのが分かります。
p要素の境界線・padding・表示領域の関係は上記となります。CSSでpaddingを20pxと指定しており、境界線と表示領域の間に20pxの余白があります。
p要素の境界線・marginの関係は上記となります。CSSでmargin20pxと指定しており、境界線の外側に20pxの余白があります。
marginを指定すると、他の要素との間に余白ができ、サンプルの場合、親要素であるbody要素との間に余白ができています。
境界線以外はWebページ上で線や色を表示することができないため意識しづらいかもしれませんが、境界線・padding・margin・表示領域の全てを合わせた領域がボックスであり、ボックスはWebページのレイアウトに関わっています。
境界線の外側の余白を指定する際に使用します。
<img class="alignnone size-full wp-image-16874"src="https://blog.codecamp.jp/wp-content/uploads/2015/12/margin-padding2-639-639x216.png"alt="margin-padding2-639"/>
余白は上下左右個別に指定することができ、値はpx指定や%指定が可能です。
サンプルではbody要素の上下左右marginを0px、p要素の上下左右marginを20pxにしています。
marginを指定するプロパティは複数用意されており、以下があります。
| プロパティ名 | 内容説明 | 指定できる値の数 |
|---|---|---|
| margin | 上下左右のmarginを指定する。 | 1〜4 |
| margin-top | 上のmarginを指定する。 | 1 |
| margin-bottom | 下のmarginを指定する。 | 1 |
| margin-left | 左のmarginを指定する。 | 1 |
| margin-right | 右のmarginを指定する。 | 1 |
なお上記の中でmarginプロパティのみ、半角スペースで区切ることで最大4つまで値を指定できます。指定した値の数とそれらの値がどう適用されるかは、以下のようになります。
| 値の数 | 各値の適用箇所 | 指定例 |
|---|---|---|
| 1 | 上下左右 | margin: 10px |
| 2 | 上下 左右 | margin: 10px 20px |
| 3 | 上 左右 下 | margin: 10px 20px 30px |
| 4 | 上 右 下 左 | margin: 10px 20px 30px 10px |
marginプロパティで上下左右を一度に指定、margin-topプロパティなどによる個別指定、どちらを利用するかは自由となります。
境界線の内側の余白を指定する際に使用します。
<img class="alignnone size-full wp-image-16875"src="https://blog.codecamp.jp/wp-content/uploads/2015/12/margin-padding3-639-639x214.png"alt="margin-padding3-639"/>
余白は上下左右個別に指定することができ、値はpx指定や%指定が可能です。
サンプルではbody要素の上下左右paddingを20px、p要素の上下左右paddingを20pxにしています。
paddingを指定するプロパティは複数用意されており、以下があります。
| プロパティ名 | 内容説明 | 指定できる値の数 |
|---|---|---|
| padding | 上下左右のpaddingを指定する。 | 1〜4 |
| padding-top | 上のpaddingを指定する。 | 1 |
| padding-bottom | 下のpaddingを指定する。 | 1 |
| padding-left | 左のpaddingを指定する。 | 1 |
| padding-right | 右のpaddingを指定する。 | 1 |
指定できるプロパティと値の関係は基本的にmarginと同じで、paddingプロパティは半角スペースで区切ることで最大4つまで値を指定することができます。
| 値の数 | 各値の適用箇所 | 指定例 |
|---|---|---|
| 1 | 上下左右 | padding: 10px |
| 2 | 上下 左右 | padding: 10px 20px |
| 3 | 上 左右 下 | padding: 10px 20px 30px |
| 4 | 上 右 下 左 | padding: 10px 20px 30px 10px |
