#author("2024-04-18T12:44:41+09:00","default:massy","massy")
#author("2024-04-18T12:53:32+09:00","default:massy","massy")
*marginとpaddingの基礎知識 [#u8dea8ce]

全ての要素は表示領域とその境界線、余白があり、この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プロパティ
|プロパティ名 	|内容説明 	|指定できる値の数|h
|margin 	|上下左右のmarginを指定する。 	|1〜4|
|margin-top 	|上のmarginを指定する。 	|1|
|margin-bottom 	|下のmarginを指定する。 	|1|
|margin-left 	|左のmarginを指定する。 	|1|
|margin-right 	|右のmarginを指定する。 	|1|

なお上記の中でmarginプロパティのみ、半角スペースで区切ることで最大4つまで値を指定できます。指定した値の数とそれらの値がどう適用されるかは、以下のようになります。
marginプロパティ指定詳細 
|値の数 	|各値の適用箇所 	|指定例|h
|1 	|上下左右 	|margin: 10px|
|2 	|上下 左右 	|margin: 10px 20px|
|3 	|上 左右 下 	|margin: 10px 20px 30px|
|4 	|上 右 下 左 	|margin: 10px 20px 30px 10px|

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

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

<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プロパティ 
|プロパティ名 	|内容説明 	|指定できる値の数|h
|padding 	|上下左右のpaddingを指定する。 	|1〜4|
|padding-top 	|上のpaddingを指定する。 	|1|
|padding-bottom 	|下のpaddingを指定する。 	|1|
|padding-left 	|左のpaddingを指定する。 	|1|
|padding-right 	|右のpaddingを指定する。 	|1|

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

----
https://blog.codecamp.jp/margin_padding
トップ   編集 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 検索 最終更新   ヘルプ   最終更新のRSS