marginとpaddingの基礎知識 †

全ての要素は表示領域とその境界線、余白があり、この3つを合わせた領域のことをボックスと呼びます。ボックスは共通して次のような構造になっています。

box

まずボックスには要素の内容(テキストなど)を表示するための領域があり、これが右図の内側の点線になります。

表示領域の周りにはボーダーと呼ばれる境界線があり、これは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;

}

margin-padding1-639

黒線がbody要素の境界線、青線がp要素の境界線となります。

marginやpaddingをCSSで指定しており、2つの境界線やボックスというテキストの間に余白があるのが分かります。

box-margin-padding-css

p要素の境界線・padding・表示領域の関係は上記となります。CSSでpaddingを20pxと指定しており、境界線と表示領域の間に20pxの余白があります。

box-padding-css

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"/>

css-margin1

余白は上下左右個別に指定することができ、値は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"/>

css-padding1

余白は上下左右個別に指定することができ、値は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

指定できるプロパティと値の関係は基本的にmarginと同じで、paddingプロパティは半角スペースで区切ることで最大4つまで値を指定することができます。
paddingプロパティ指定詳細 値の数 各値の適用箇所 指定例
1 上下左右 padding: 10px
2 上下 左右 padding: 10px 20px
3 上 左右 下 padding: 10px 20px 30px
4 上 右 下 左 padding: 10px 20px 30px 10px
こちらもmarginと同様、どのプロパティを利用するかは自由となります。

トップ   新規 一覧 検索 最終更新   ヘルプ   最終更新のRSS