paddingとmarginは両方ともHTML要素の周りのスペースを制御するCSSプロパティですが、以下のように重要な違いがあります。
目次
paddingの特徴
- 要素の内側のスペースを制御します。
- 要素の境界(border)の内側に適用されます。
- 要素の背景色や背景画像も含めて拡張されます。パディングを設定すると、要素のボックス内側のスペースが広がります。
- テキストや画像などの内容が、要素の境界線や他の内容にくっつかないようにするために使います。
marginの特徴
- 要素の外側のスペースを制御します。
- 要素の境界(border)の外側に適用されます。
- 背景色や背景画像には影響しません。
使い分けのポイント
「余白」に何を意味するかによって、paddingとmargin のどちらを使うべきかが変わります。
内容と要素の境界（内側）の余白の場合はpaddingが適しています。
padding は要素の内容（テキストや画像など）とその境界（ボーダー）との間のスペースを確保するために使います。
要素内のテキストがボーダーにくっつかないようにしたり、ボタン内のテキストに適度な余白を持たせる場合に使用します。
要素同士の間（外側）の余白の場合marginが適しています。
margin は要素とその外部（隣接する要素やページの端）との間のスペースを確保します。
見出しと段落の間に余白を作ったり、複数のボックス間にスペースを持たせる場合に使います。要素間の距離を調整するのに適しています。
要素を中央に配置する場合margin が適しています（特に水平中央揃えの場合）。
ブロック要素を中央揃えにする場合、margin: 0 auto; を設定することで、要素を左右の中央に配置できます。
まとめ
内容の周りに余白を持たせたいときはpaddingになり、要素の外側に余白を作りたいときはmarginになります。
それぞれの用途に応じて使い分けることで、デザインやレイアウトをより効果的にコントロールできます。
関連記事
大阪のホームページ制作会社TREVOでは、ホームページ制作に関する情報を掲載しています。最短2日で仮サイトを公開するサービスやSEO対策に特化したホームページ制作、オリジナルホームページデザイン、ライティング、リスティング広告、WEBマーケティングなどのサービスをご紹介しています。
衣川知秀
経歴： 3DCG制作の専門学校を卒業後、デザイン会社に就職。デザイン会社では主にWEB制作を担当し、旅館の予約システムや商店街にWEBカメラを設置したプロモーション等を展開し、4年後に転職。 株式会社TREVOでデザイン、コーディング、ディレクション、システム開発を担当
