paddingとmarginの使い方

paddingとmarginは要素の間隔を空けるためのCSSプロパティです。paddingは要素の内側の余白、marginは要素の外側の余白を空けるために使用します。

CSSを使い始めたころは、paddingとmarginの違いが分からず覚えるのに苦労しました。今回は、このpaddingとmarginの使い方や仕様についてCSSを使い始めたばかりの人にもわかりやすく説明します。

paddingとmarginの使い方

paddingとmarginの違い
paddingとmarginの指定方法
paddingとmarginが使える要素と使えない要素

paddingとmarginの違い

margin-padding

要素(Element)はこのような構成となっています。

要素(Element)とはdivタグやpタグのことで、borderをはさんで内側の余白のことをpaddingといい、外側の余白のことをmarginといいます

paddingとmarginを指定した場合の例

paddingとmarginを指定していない場合、以下のようになります。

<div style="border:2px solid #aaa; width:200px;">Element</div>

Element

paddingを指定した場合

paddingを指定した場合は、このようにborderの内側に10pxの余白が生まれます。

<div style="border:2px solid #aaa; width:200px; padding:10px;">Element</div>

Element

marginを指定した場合

paddingを指定した場合は、このようにborderの外側に10pxの余白が生まれます。

少しわかりずらいかもしれませんが、要素の開始位置(左側のborderが書かれる位置)がmarginを指定しないものより10px分右にずれています。

<div style="border:2px solid #aaa; width:200px; margin:10px;">Element</div>

Element

paddingとmarginの指定方法

paddingとmarginの指定方法は大きく3つあります。

1.四方の一括指定

padding/marginは上下左右を個別に指定することも出来ますが、以下の方法は指定した「○○px」の値を四方に一括で指定する方法です。

margin:○○px;
padding:○○px;

2.四方の順次指定

padding/marginは上下左右を個別に指定する方法です。上のpadding/marginから順に空白で区切り右 / 下 / 左と指定していきます。「margin:10px 7px 5px 3px;」と指定すると上に10px,右に7px,下に5px,左に3pxのmarginを取ります。

margin:[上] [右] [下] [左];
padding:[上] [右] [下] [左];

3.各方向の個別指定

各方向を個別に指定する方法です。上下左右を個別に指定できるため、1方向のみ指定して後はデフォルトの指定を利用したい場合に利用します。

/* marginの指定 */
margin-top:○○px;        /* 上 */
margin-right:○○px;      /* 右 */
margin-bottom:○○px;   /* 下 */
margin-left:○○px;        /* 左 */

/* paddingの指定 */
padding-top:○○px;       /* 上 */
padding-right:○○px;     /* 右 */
padding-bottom:○○px;  /* 下 */
padding-left:○○px;       /* 左 */