paddingとmarginの違いと使い分けについて
投稿日：2024.09.11.
更新日：2025.04.12.
デザイン歴 20 年超、500 サイト以上を監修。ブランド戦略をビジュアルへ昇華し、使いやすさと美しさを両立させる UI/UX が持ち味。
3DCG 専門学校卒業後、広告代理店で Web デザイナーとしてキャリアを開始。旅館予約システムや商店街プロモーションなど多業種案件で「伝わるデザイン」の基礎を固めました。
その後、制作部門のリーダーとして 5 年間にわたりチームマネジメントを経験。企画立案から撮影ディレクション、公開後の AB テストまで、クリエイティブとマーケティングの橋渡し役を担ってきました。
2013 年に TREVO を共同設立。現在はデザイン、UI ガイドライン策定やアクセシビリティ監修を担当。
最近の取り組み：AI 生成画像と手描きイラストを組み合わせたブランドビジュアル開発とプロトタイプ検証。
信条：私たちが目指すのは、ホームページ制作を通じてお客様がハッピーになること。そして、そのホームページを訪れるユーザーが心地よく、笑顔になれるような体験を提供し、世の中にポジティブな影響を少しずつ増やしていくことです。
執筆記事：記事一覧ページ
paddingとmarginは両方ともHTML要素の周りのスペースを制御するCSSプロパティですが、以下のように重要な違いがあります。
paddingの特徴
- 要素の内側のスペースを制御します。
- 要素の境界(border)の内側に適用されます。
- 要素の背景色や背景画像も含めて拡張されます。パディングを設定すると、要素のボックス内側のスペースが広がります。
- テキストや画像などの内容が、要素の境界線や他の内容にくっつかないようにするために使います。
marginの特徴
- 要素の外側のスペースを制御します。
- 要素の境界(border)の外側に適用されます。
- 背景色や背景画像には影響しません。
使い分けのポイント
「余白」に何を意味するかによって、paddingとmargin のどちらを使うべきかが変わります。
内容と要素の境界（内側）の余白の場合はpaddingが適しています。
padding は要素の内容（テキストや画像など）とその境界（ボーダー）との間のスペースを確保するために使います。
要素内のテキストがボーダーにくっつかないようにしたり、ボタン内のテキストに適度な余白を持たせる場合に使用します。
要素同士の間（外側）の余白の場合marginが適しています。
margin は要素とその外部（隣接する要素やページの端）との間のスペースを確保します。
見出しと段落の間に余白を作ったり、複数のボックス間にスペースを持たせる場合に使います。要素間の距離を調整するのに適しています。
要素を中央に配置する場合margin が適しています（特に水平中央揃えの場合）。
ブロック要素を中央揃えにする場合、margin: 0 auto; を設定することで、要素を左右の中央に配置できます。
まとめ
内容の周りに余白を持たせたいときはpaddingになり、要素の外側に余白を作りたいときはmarginになります。
それぞれの用途に応じて使い分けることで、デザインやレイアウトをより効果的にコントロールできます。
関連記事
大阪のホームページ制作会社TREVOでは、最短2日で仮サイトを公開できるスピード対応や、SEO対策に強いオリジナルデザインの制作サービスを提供しています。
関連の記事
-
TREVOスタッフ
-
Webディレクターってどんな仕事なのか！
- TREVOスタッフ
-
- 板浪雅樹
-
- 板浪雅樹
-
- 板浪雅樹
-
- TREVOスタッフ
