【HTML入門】余白の取り方(paddingとmargin)について

Pocket

HTML言語では、上下左右に余白を取ろうと思ったときに「padding」「margin」を用います。
どちらを使用しても、見た目上では同じように余白が取れているように見える場合があるので、どちらがどのような余白を意味するのか正確に理解していない人もいるのではないでしょうか。

paddingとは

paddingは、内側（要素内）の余白のことを表しています。
文字だけで書いてもイマイチピンと来ない人もいるので、図を用いて説明しましょう。

上図で示している「Content」の部分は、divタグ、pタグ、imgタグといったような要素の事です。

Contentに対して装飾（背景色を付けたり線で囲う等々)をすることが出来ますが、
この線（border）の内側の余白部分を「padding」で設定することが出来ます。

Contentにpaddingを設定するとその分領域が広がるので、Contentに背景色を付けるとpadding部分にもその背景色が付きます。

marginとは

marginは、外側（要素外）の余白のことを表しています。
paddingの説明を読んだ人は、これだけで大体の事を理解できていると思います。

線（border）の外側の余白部分を「margin」で設定することが出来ます。

marginは要素外に対するものなので、Contentに背景色を付けてもmarginの領域にその背景色は付きません。

記述の仕方も、paddingの場合とほぼ変わりません。「padding」の部分を「margin」にするだけです。(例：margin-top: 〇px;)

marginを使用する際の注意点

marginを使うにあたって知っておかないといけないのが「marginは縦方向で重なるmarginを相殺する性質がある」ということです。
横方向は相殺しません。また、paddingはこの性質はありません。

上図は、コンテンツ１と2に対してmarginを4方向に20px設定しています。
コンテンツ1と2の間（横方向）にはmarginが相殺されずに40pxの余白あるのがわかると思います。

上図も同様に、コンテンツ１と2に対してmarginを4方向に20px設定しています。
コンテンツ1と2の間（縦方向）にはmarginが相殺されて20pxの余白しかないのがわかると思います。

補足として、相殺は数値の大きい方が適用されます。上図において、コンテンツ１に20ｐｘ・コンテンツ2に30pxのmarginを設定していた場合、コンテンツ1と2の間の余白は30pxということになります。

まとめ

ここでは簡単にpaddingとmarginについて説明してきました。
記述の単位には「px」だけではなく、相対的に変わる「%」など他にもあります。
もっと詳細に知りたい方は色々と調べてみるといいでしょう。

おすすめ
➡HTMLの本・参考書の評判
➡無料で使える！HTMLの学習サイトBEST7

投稿者：プロスタ編集部

• tweet
• 
•