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

-　詳しい解説　-

ウェブデザインにおいてはパディングやマージンを用いて余白を設定することができる。

パディング（Padding）とは英語で詰め物やパッド、水増しなどの意味がある。ウェブページのデザインにおいてパディングというときは、特にテキストや画像といった表示要素の内側に設ける余白のことをさす。表示する要素の枠線、つまり要素の境界から、その内側のテキストなどまでの距離を表し、CSS（スタイルシート）などにおいて自由に設定できる。
要素からの境界までの距離は上下左右に設定できる。

一方マージン（Margin）とは英語で余白や欄外、余地などの意味がある。ウェブデザインにおいては、そのページ自体やページ内の表示要素の周囲に設けられる余白のことをさす。表示要素の境界の外側に設定される空白のことである。

マージンは要素の境界の外側の空間に背景色や背景画像を適用したくない場合に用いられ、逆にパディングはそれを適用したい場合に用いられる。