更新日: 2017年03月23日
公開日: 2015年12月04日

marginとpaddingとは？基礎から解説！ゼロから始めるHTML/CSS講座Vol08

ゼロから始めるHTML/CSS講座marginとpadding
marginとpaddingの基礎知識
margin
padding

ゼロから始めるHTML/CSS講座marginとpadding

marginとpaddingの基礎知識

全ての要素は表示領域とその境界線、余白があり、この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ページのレイアウトに関わっています。

margin

境界線の外側の余白を指定する際に使用します。 <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	上下左右のmarginを指定する。	1〜4
margin-top	上のmarginを指定する。	1
margin-bottom	下のmarginを指定する。	1
margin-left	左のmarginを指定する。	1
margin-right	右のmarginを指定する。	1

なお上記の中でmarginプロパティのみ、半角スペースで区切ることで最大4つまで値を指定できます。指定した値の数とそれらの値がどう適用されるかは、以下のようになります。

marginプロパティ指定詳細
値の数	各値の適用箇所	指定例
1	上下左右	margin: 10px
2	上下左右	margin: 10px 20px
3	上左右下	margin: 10px 20px 30px
4	上右下左	margin: 10px 20px 30px 10px

marginプロパティで上下左右を一度に指定、margin-topプロパティなどによる個別指定、どちらを利用するかは自由となります。

padding

境界線の内側の余白を指定する際に使用します。

<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	上下左右のpaddingを指定する。	1〜4
padding-top	上のpaddingを指定する。	1
padding-bottom	下のpaddingを指定する。	1
padding-left	左のpaddingを指定する。	1
padding-right	右のpaddingを指定する。	1