ホーム＞コース別ガイド一覧＞マージンとパディングの違いを知っておこう！

マージンとパディングの違いを知っておこう！

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

マージンとパディングはどちらも余白を設定できます。では、その違いとは一体何なのでしょうか？それは簡単に言うと、マージンは枠線の外側の余白で、パディングは枠線の内側の余白です。と言っても、ピンと来ない方もいらっしゃるでしょう。では、まず下図をご覧ください。

この図は真ん中に要素があり、そしてオレンジ色が枠線（ボーダー）を表しています。先ほど説明したように、マージンは枠線の外側の余白で、パディングは枠線の内側の余白です。つまり、緑色の部分がマージンの指定できる余白で、黄色の部分がパディングの指定できる余白です。このように図を参照すれば、ずっと分かりやすくなったと思います。また、パディングに設定した余白は枠線の内側の余白つまり、背景色の領域となるので、パディングによる余白を大きくすれば背景色の付いた余白も大きくなります。反対に、マージンに設定した余白は枠の外側なのでマージンを大きくしても背景色の範囲は広がりません。

パディングと背景色

普通、要素の背景色は要素にそって表示されます。これは、見出しなどで使うと見づらくなってしまったり、デザイン的に要素より背景色を少し大きく表示した方がいい場合があります。要素より背景色による余白を大きくするにはパディングを広げます。では、パディングを指定しない場合の背景色の見え方を確認しましょう。
次に「背景色は要素にそって表示されます。」という文字列（span 要素）にグレー系の背景色を指定します。このときパディングを指定しません。

表示例：背景色は要素にそって表示されます。

このように要素にそって背景色が表示されます。

では、次にパディングを広げた表示例の見え方を確認してください。（span 要素に padding プロパティで10pxの余白を指定しています）

表示例：背景色は要素より10px広がって表示されます。

このように要素の背景色による余白が広がりました。

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

下の表にマージンとパディングの細かな違いを記述しました。なお、「値にautoの指定」、「負の値」については「マージンのMEMO」、「余白の相殺」に関しては「上下のマージンは打ち消されます！」を参照してください。

違い	マージン （ margin ）	パディング （ padding ）
余白の位置	枠線の外側の余白	枠線の内側の余白
負の値 ( マイナス値の指定 )	指定できます	指定できません
余白の相殺	相殺されます	相殺されません
値にautoを指定	指定できます	指定できません

関連情報ページ
CSS一覧プロパティ辞典
CSS一覧プロパティ辞典-マージン関連- CSS一覧プロパティ辞典-パディング関連-	CSS一覧プロパティ辞典-枠線関連-
その他
HTMLの基礎！