paddingとmarginの違い
2013年4月27日:CSS
paddingとmarginはウェブのレイアウトの際に重要です。
これらはどちらもスペースを指定します。
ただいまいち違いがわかりにくいと思うので説明します。
paddingとmarginの違い
まず、以下の図を見てください。
要素は、図や文字などを意味しています。
要素の幅と高さはwidthやheightで指定できます。
paddingは要素に膨らみをもたせます。
女性が胸を大きく見せるために「パッドを入れたり」しますよね。
(要素が胸で、paddingがパッドで、borderがブラジャーの厚みです)
図では上下左右に空間があるので、paddingを上下左右に設定しています。
marginは外界との距離です。
図では上下左右に空間があるので、marginで上下左右を設定しています。
paddingとmarginの構文
paddingやmarginは以下のようにCSSで指定できます。
上下左右に適用する
以下の構文で上下左右に適用することができます。
padding: ○○○px;
margin: ○○○px;
margin: ○○○px;
○○○のところに余白を入れる大きさを記入します。
上下左右にそれぞれ値を変えたい場合は
padding: 上 右 下 左;
padding: 1px 2px 3px 4px;
のようにします。上から時計回りです。
値が4つでなくて3つ、2つの場合もあります。
2つ:padding: 上下 左右;
3つ:padding: 上 左右 下;
3つ: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-bottom: ○○○px;
padding-left: ○○○px;
padding-right: ○○○px;
margin-top: ○○○px;
margin-bottom: ○○○px;
margin-left: ○○○px;
margin-right: ○○○px;
paddingとmarginは位置の微調整ができるので、必ず使えるようにしておきましょう。
著者:安井 真人(やすい まさと)
@yasui_masatoさんをフォロー