余白を付けるpaddingとmarginについて

余白を持たせるデザインをする

余白を持たせるには、CSSを使って「padding」または「margin」で数値を指定します。
例えば
上に余白を10px持たせるには、
padding-top:10px;
margin-top:10px;

下に余白を10px持たせるには、
padding-bottom:10px;
margin-bottom:10px;

右に余白を10px持たせるには、
padding-right:10px;
margin-right:10px;

左に余白を10px持たせるには、
padding-left:10px;
margin-left:10px;

といった具合です。pxでの指定をしましたが、emや%を使っても問題ありません。

4通りの書き方で、一行で済ませる事もできる

上下左右それぞれの記述を別々に書きましたが、一行で済ませる事もできます。

まず、全てに同じ幅の余白を付ける場合についてです。
「padding:10px;」「margin:10px;」と書いくことで、上下左右に同じ余白が付けられます。

次に、上下と左右のそれぞれに同じ幅の余白を付ける場合です。
「padding:10px 20px;」「margin:10px 20px;」と指定してあげれば、上下に10px、左右に20pxの余白を持たせることができます。

続いて上・下・左・右にそれぞれ異なる幅の余白を付ける場合です。
「padding:10px 15px 20px 25px;」や「margin:10px 15px 20px 25px;」と書きます。
これで上に10px、右に15px、下に20px、左に25pxの余白を持たせることができます。
最初の内はわからなくなりますが、上、右、下、左と時計回りに数値を指定してあると覚えると簡単です。

最後に上・下・左右にそれぞれ異なる幅の余白を付ける場合です。
「padding:10px 15px 20px;」や「margin:10px 15px 20px;」と書きます。
これで上に10px、右に15px、下に20px、左に15pxの余白を持たせることができます。
指定している箇所が3箇所しかありませんが、上・左右・下の順で数値が反映されます。

paddingとmarginの違いについて

どちらも余白を持たせるのに使われますが、違いってなに？と思いますよね。
これら2つには、きちんと違いがあります。

paddingは要素の内側に余白を付ける

paddingは要素の内側にどれだけ余白をつけるのかを指定できます。
内側に付けられるので、背景色や線、テキストや画像との間に余白が付きます。

それでは実際にpaddingの指定のない場合を見てみましょう。

これでは背景色との間にスペースがないので、詰まった印象になっています。
身近な物、例えばティッシュの箱や雑誌、新聞をよく見ると、背景色や線と文字の間に余白があることがわかります。
余白は印象を与える他に、文字の読みやすさにもつながるので重要なポイントです。

それでは上下左右に20pxの余白をpaddingを使って付けてみましょう。

今度は余白が付いて、読みやすくなりましたね。
このようにpaddingを使うと、要素の内側に余白が付くので、その分背景色と文字、線と文字との間にスペースを設ける事ができます。

最初はpaddingとmarginでどっちが内側か分からなくなる事が多くあると思います。
cssの記述については一度きりしかできない操作ではありません。何度も書き直しができるので、間違えていたら書き直すという作業を繰り返して覚えるのも一つの手段ですが、padding…「pad=内側に入れるもの」と考えると覚えやすいですよ。

marginは要素の内側に余白を付ける

marginは要素の外側にどれだけ余白をつけるのかを指定できます。
外側に付けられるので、要素と要素の間に余白が付けられます。

ちなみに各要素に30pxずつ余白を付けると、実際はこのような動作になります。

左右には30px + 30pxで60pxの余白ができますが、上下は30pxの余白しかできていません。

理屈としては上下にも60pxの余白ができるはずですが、なぜか片方の数値しか反映されない仕様になっています。
納得できませんが、これはmarginの特性なので、こういうものなんだと覚えておいてください。
ちなみに上に60px、下に30pxの数値を指定した場合、上下には大きな数値が優先されるので、60pxの余白が付くことになります。

margin:0 auto;を使うと要素を中央に配置することもできる

autoという指定を左右に持たせることで、親要素から見て中間の位置に要素を配置することができます。
paddingではできないので、注意してください。

まとめ

・paddingは要素の内側に余白を設ける
・marginは要素の外側に余白を設ける
・余白は読みやすさにもつながるので、ある程度つける様に考慮する
・背景色や線と文字の間に余白を付ける場合はpadding
・marginで上下に余白を設ける場合、大きな数値の方が優先される