paddingとmarginの違い

2013年4月27日：CSS

paddingとmarginはウェブのレイアウトの際に重要です。

これらはどちらもスペースを指定します。

ただいまいち違いがわかりにくいと思うので説明します。

paddingとmarginの違い

まず、以下の図を見てください。

Paddingとmargin

要素は、図や文字などを意味しています。

要素の幅と高さはwidthやheightで指定できます。

 

paddingは要素に膨らみをもたせます。

女性が胸を大きく見せるために「パッドを入れたり」しますよね。

(要素が胸で、paddingがパッドで、borderがブラジャーの厚みです)

図では上下左右に空間があるので、paddingを上下左右に設定しています。

 

marginは外界との距離です。

図では上下左右に空間があるので、marginで上下左右を設定しています。

 

paddingとmarginの構文

paddingやmarginは以下のようにCSSで指定できます。

上下左右に適用する

以下の構文で上下左右に適用することができます。

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

○○○のところに余白を入れる大きさを記入します。

 

上下左右にそれぞれ値を変えたい場合は

padding: 上 右 下 左;

padding: 1px 2px 3px 4px;

のようにします。上から時計回りです。

 

値が４つでなくて３つ、２つの場合もあります。

２つ：padding: 上下 左右;
３つ：padding: 上 左右 下;

 

一部に適用する

上下左右全てでなくて一部に指定するには以下の構文を使います。

    padding-top: ○○○px;
    padding-bottom: ○○○px;
    padding-left: ○○○px;
    padding-right: ○○○px;
    margin-top: ○○○px;
    margin-bottom: ○○○px;
    margin-left: ○○○px;
    margin-right: ○○○px;

 

paddingとmarginは位置の微調整ができるので、必ず使えるようにしておきましょう。

著者：安井 真人(やすい　まさと)

TOP