paddingとmarginの違い。勘違いしやすい余白設定
htmlで文章や画像との行間を開けるために使われる「padding」と「margin」。
使い方は「行間を広げる」「余白をつける」と視覚上では似た物ですが、プログラム上での用途はかなり違います。
paddingあるいはmargin のみを使うならそこまで違いはありませんが、他のプログラムと組み合わせると違いが色濃く出てきます。
デザインを変えるときなど、使える場面も違ってくるので特性をしっかり理解しましょう。
paddingとmarginの大雑把な違い
paddingは文章の内側の余白を、marginは文章の外側の余白を設定します。
…これだけだとイマイチ分かりづらいと思うので、図にして説明します。
記述される文章には見やすく表示できるように一種の占有スペースがあります。
これをとりあえず「表示領域」と呼びます。
通常は青い枠線くらいまでが文章の表示領域なんですが、この青い枠線までの幅をpaddingで設定でき、青～赤の枠線の部分の「上下の文章までの幅」をmarginで設定できます。
図のように「border」といった線を引くと分かりやすいです。
「border」で文章などを囲いたい場合はpaddingを使わないと余白設定ができません。
幅の数値設定は画素数（ピクセル）のpx、文字の大きさを基準としたem、小文字のxの大きさを基準にしたexで指定できます。
まあ大抵はpxかemですることが多いです。
padding
paddingの記述の仕方
paddingを記述する際の仕方です。
padding:10px 20px…10pxが上下、20pxが左右の幅で指定。
padding:5px 10px 15px 20px…5pxが上、10pxが右、15pxが下、20pxが左と時計回りで幅を指定。
padding-top:10px…上の幅を指定。
padding-bottom:10px…下の幅を指定。
padding-left:10px…左の幅を指定。
padding-right:10px…右の幅を指定。
このように数値を複数書いて指定する方法と、「-top」と書いて個別に指定する方法があります。
設定する箇所が多いなら一括、あるいは複数の数値で。
一か所だけなら個別で指定するなどして使い分けましょう。
paddingをよく使う場面
paddingをよく使うのはデザインなどで背景色や枠線の幅を調整する時です。
paddingを設定していない文章+背景色
padding:20pxと指定した文章+背景色
padding:20pxと指定した文章+枠線
このように背景色や枠線の範囲は文章の持つpaddingの幅で設定されます。
htmlでボタンのようなものを作るときも使ったりします。
margin
marginの記述の仕方
marginを記述する際の仕方です。
margin:10px 20px…10pxが上下、20pxが左右の幅で指定。
margin:5px 10px 15px 20px…5pxが上、10pxが右、15pxが下、20pxが左と時計回りで幅を指定。
margin-top:10px…上の幅を指定。
margin-bottom:10px…下の幅を指定。
margin-left:10px…左の幅を指定。
margin-right:10px…右の幅を指定。
このようにpaddingの記述の仕方と同じなので、どちらか覚えておけば自然と書けるようになります。
ちなみにmarginはpaddingと違い、マイナスの数値を設定できます。
数値をマイナスにしたらどうなるかは後述の「marginをよく使う場面」で。
marginをよく使う場面
marginは文章や画像間の行間を取りたい時によく使います。
例えばこのように、文章と画像が近い場合。
寒い中元気に咲いてくれました。
こんなときは文章、あるいは画像のほうでmarginを設定すれば行間を開けることができます。
今回は「div style="margin:20px 0px"」で画像コードを囲んで設定してみます。
寒い中元気に咲いてくれました。
このように文章と画像の間に行間を設定できます。
あるいはこのようにボタン形式で文章を並べた場合。
ボタン1
ボタン2
ボタン3
「display:inline」などで横並びにした際にボタン同士の間隔が足りないときがあります。
そんな時はボタン2に「margin:0px 5px」と設定すれば、ボタンの左右に5px分の間を開けられます。（別にボタン全部に設定してもいいですが）
ボタン1
ボタン2
ボタン3
こんな風にmarginでは要素同士に間隔を開けることもできます。
あとmarginをマイナスに設定したらこうなります。
とりあえず「かきくけこ」の「margin-top」の数値ををマイナスにしてみます。
あいうえお
かきくけこ
こんな感じで文章同士が重なるようになります。
使う事はあまりないでしょうが、一応覚えておきましょう。
line-heightとはどう違うのか？
paddingやmarginと同じくline-heightも行間を設定するプロパティですが、前述した通りpaddingとmarginは要素の左右の間隔も開けることができます。
しかしline-heightは
・marginと同じくマイナス値を設定できず、上下の文章が重ならないよう行間を取れる。
と、line-heightはpaddingとmarginの機能の一部を混ぜたような形になっています。
こちらの文章のみpaddingとmarginを0にして、line-heightのみで行間を取ってみました。
line-height:1emにした文章
line-height:2emにした文章
通常はline-heightで基本的な行間を設定しておき、部分的に行間が必要なときにstyleなどでpaddingやmarginを設定して微調整することになります。
最後に
以上でpaddingとmarginの違いの解説を終わります。
両方とも余白の設定をするためのものですが、機能には大分違いがあることがわかって頂けたでしょうか？
両方の機能の違いを理解しておき、行間を開けたいときに適した方を使うようにしましょう。