htmlで勘違いしやすい「padding」と「margin」の違いを紹介。似て非なる使い方に注意!

htmlで文章や画像との行間を開けるために使われる「padding」と「margin」。
使い方は「行間を広げる」と似た物ですが、あくまで視覚的なものでプログラム上はかなり違います。
デザインを変えるときなど、使える場面も違ってくるので特性をしっかり理解しましょう。

スポンサードリンク

paddingとmarginの大雑把な違い

paddingは文章の内側の余白を。
marginは文章の外側の余白を設定します。

・・・これだけだとイマイチ分かりづらいと思うので、図にして説明します。

記述される文章には見やすく表示できるように一種の占有スペースがあります。
これをとりあえず「表示領域」と呼びます。

通常は青い枠線くらいまでが文章の表示領域なんですが、この青い枠線までの幅をpaddingで設定でき、青~赤の枠線の部分の「上下の文章までの幅」をmarginで設定できます。

幅の数値設定は画素数(ピクセル)のpx、文字の大きさを基準としたem、小文字のxの大きさを基準にしたexで指定できます。
まあ大抵はpxかemですることが多いです。

padding

paddingの記述の仕方

paddingを記述する際の仕方です。

padding:10px・・・上下左右の幅をまとめて指定。
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でボタンのようなものをつくるときも使ったりします。

ボタン1

margin

marginの記述の仕方

marginを記述する際の仕方です。
このようにpaddingの記述の仕方と同じなので、どちらか覚えておけば自然と書けるようになります。

margin:10px・・・上下左右の幅をまとめて指定。
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・・・右の幅を指定。

ちなみにmarginはpaddingと違い、マイナスの数値を設定できます。
数値をマイナスにしたらどうなるかは後述の「marginをよく使う場面」で。

marginをよく使う場面

marginは文章や画像間の行間を取りたいときによく使います。

例えばこのように、文章と画像が近い場合。

寒い中元気に咲いてくれました。

こんなときは文章、あるいは画像のほうでnarginを設定すれば行間を開けることができます。
今回は「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は

・paddingのように背景色などを含めた行間(表示領域)を広げられる
・marginと同じくマイナス値を設定できず、上下の文章が重ならないよう行間を取れる。

と、line-heightはpaddingとmarginの機能の一部を混ぜたような形になっています。

こちらの文章のみpaddingとmarginを0にして、line-heightのみで行間を取ってみました。

line-height:1emにした文章

line-height:2emにした文章

通常はline-heightで基本的な行間を設定しておき、部分的に行間が必要なときにstyleなどでpaddingやmarginを設定して微調整することになります。

スポンサードリンク

最後に

以上でpaddingとmarginの違いの解説を終わります。
両方とも余白の設定をするためのものですが、機能には大分違いがあることがわかって頂けたでしょうか?
両方の機能の違いを理解しておき、行間を開けたいときに適した方を使うようにしましょう。