html5やcssを覚え始めたばかりの頃は、わからないことがたくさんあるかと思います。

その中でも本日は、cssでwebデザインをするときに必ず活用する、
margin（マージン）と
padding（パディング）の違いをご紹介です。

結論から申し上げると・・・
marginとは、外側の余白、
paddingとは、内側の余白です。

もっと簡単に説明しますと、
要素を上下左右に移動させたいときは、margin。
要素内の文字を見やすいように余白をつけたいときは、paddingを活用するイメージを持つとわかりやすいかもしれません。

※厳密言うと移動ではありませんが、わかりやすいようにあえて移動という言葉を使用しています。
また、要素の位置を変える方法は他にもあります。

では実際にコードを書いて見てみましょう。

div id=”about_margin”　がマージンを紹介するブロック
div id=”about_padding”　がパディングを紹介するブロック

marginとpaddingの数値を設定していきます。
ちなみに、marginとpaddingのどちらも下記のように数値を設定できます。

margin : 上　右　下　左 ;　= margin : 10px 20px 10px 20px ;（上から時計回りです。paddingも同様）または、
margin : 上下　左右 ;　= margin : 10px  20px ;
margin : 上下左右 ;　= margin : 20px ;

今回は上下に10xp、左右に20pxを設定しました。（分かりやすいように背景色をつけています。）

#about_margin（ピンク色）は最初の位置から下へ10px、右へ20px移動しました。
これは、#about_marginの上下と左右に外側余白が付くことで、移動したように見えるのです。

そして、#about_padding（緑色）は内側余白が上下10px（合わせて20px）、左右が20px（合わせて40px）付きました。
内側余白が付くことで、緑色部分の範囲が広がりましたね。

さらに付け足すと、#about_margin（ピンク色）の下側に10pxの外側余白がついた為、#about_padding（緑色）は
最初の位置から下へ10px移動しています。

もう一度、比較してみましょう。

見比べるとよく分るのが、marginのブロック（ピンク色）は位置が動いていて、
paddingのブロック（緑色）はブロック自体が余白分大きくなり、文字が読みやすくなりました。

marginとpaddingの意味を理解すると、文字や画像のバランスを整えることが出来ます。
必然的にwebページの見た目がすっきりとし、ユーザーにとって見やすいページを作ることができますね。

marginやpaddingの数値はpx以外にもいろいろな単位を設定することができます。
今はレスポンシブ対応が必須となりますので、% や vw などを駆使し、ウィンドウサイズに合わせて
余白が自動に設定できるようになるとユーザーにとっても制作者にとっても親切です。

使いこなせれば、ワンランク上のバランスの取れたデザインを実現することが可能になるかもしれませんね。