CSSのマージン（margin）とパディング（padding）の違いとは？

CSSにおけるマージン（margin）とパディング（padding）の違いについて、図解とコード例を使ってわかりやすく解説します。Webデザインの基礎となる重要な概念なので、しっかり理解しておきましょう。

マージンとパディングの違い

まずは、最もシンプルな定義から始めます。

• margin：HTML要素のボーダー（枠線）の外側にスペースを追加する
• padding：HTML要素のボーダーの内側にスペースを追加する

マージンやパディングをHTML要素に適用すると、それぞれ次のように異なる働きをします。

上の図のように、マージンは要素の外側にある余白、パディングはボーダーとコンテンツの間にある内側の余白を表しています。この概念を踏まえて、実際のHTML要素でどのように機能するのかを見ていきましょう。

実際のHTML要素での例

次の例は、<div>コンテナの中に配置されたシンプルな<button>要素です。

このボタンには、以下のスタイルが設定されています。

• 24pxのマージン：ボタンの周囲にスペースを作り、親要素であるコンテナの境界線から離して配置する
• 4pxのボーダー：ボタンを囲む枠線
• 16pxのパディング：ボタンのボーダーとコンテンツ（テキスト）の間にスペースを作る
• コンテンツ：この場合は「Button」というテキストラベル

button {
    padding: 16px; 
    margin: 24px; 
    border: 4px solid #282828;
}

使い分けのポイント

marginとpaddingプロパティは、どちらも余白（ホワイトスペース）を制御するためのものですが、その適用方向は正反対です。実務では次のように使い分けるとよいでしょう。

• 要素同士の距離を空けたい場合 → margin
• 要素の内側に余裕を持たせたい場合（背景色とテキストの間など）→ padding

たとえば、カード型のレイアウトでは、カード同士の間隔にmarginを、カード内のテキストと枠の間隔にpaddingを使うのが一般的です。また、ボタンのクリック領域を広げたい場合にもpaddingが有効です。

両者の役割を正しく理解することで、より意図した通りのレイアウトを効率よく組めるようになります。