marginとpaddingの違い

CSSのデザインやレイアウトをするうえでmarginとpaddingはとても重要な概念です。
にも拘らず、この2つが区別できず、「見た目が思った通りにできてればどちらでも同じ」と考えてる人を見かけます。

marginとpaddingこの2つは意味が全然違う事を理解し、CSSのデザインやレイアウトを作成する時、適切な設定を行う事が大事です。
この2つを意識して設定する事で、確実でミスの少ない、メンテナンス性の優れたソースコードを書くことができます。

marginとpaddingの違いをまず理解しましょう。
marginとは要素の外側の余白、即ち、要素同士の間をあけたい時に使います。
paddingとは要素の内側の余白、即ち、要素の内側を広げたい時に使います。

では、次のようなサンプルで考えてみましょう。

【テスト用サンプル】

【htmlのソースコード】

【cssのソースコード】

【表示サンプル】

上記のサンプルを解り易く、お家が3件建ってるものと想定してみましょう。

hoses

この時、marginは要素の外側ですから、隣同士の要素を離す事ができます。
即ち、お互いの家を離す事と同じです。
例えば、「margin: 30px;」を追記する事は次のようになイメージでしょうか。
見たら解るとおり、自分の家の領域は全く広くなっていません。

hoses

次にpaddingを考えてみましょう。
paddingは要素の内側を広げる事になります。
即ち、自分の家の庭を広げる事と同じです。
例えば、「padding: 30px;」を追記する事は次のようなイメージでしょうか。
こちらも見たら解るとおり、家の領域は大きくなりましたが、隣同士はくっついたままです。

hoses

上記2つのサンプルを背景色抜きで並べてみると次のようになります。

hoses

このようにmarginを使ってもpaddingを使っても、お互いの家(要素)が離れ、見た目が同じになる事から「どちらで設定しても同じでしょ?」という考え方になってしまいがちですが、家の外(要素の外側)を広くするのと、家の内側(要素内)を広くするのとでは、要素の形、それぞれのレイアウト、は明らかに違う、という事をしっかりと理解するべきです。

今行おうとしてるデザインはお互いを引き離したいのですか?
それともくっつけたまま、内部の領域を増やしたいのですか?

前の記事

センタリングの方法