cssを記述しだして、始めに誰もが疑問に思うのがpaddingとmarginの違いでしょう。
実際に、記述しながらデザインを確認していると、どこが変化しているのかわかる為、ここのことか！とわかると思いますが、普段使っていると、どっちがどっちだったっけ…となりがちです。
そんな事がないように、今回はpaddingとmarginの違いをもう一度確認しておきたいと思います。
marginとは
marginは、要素の外側の空間、つまり余白のことです。
赤い部分がmarginです。周りの要素との空間なので、marginを調整することは、周りの要素との余白を調整するということになります。
marginの相殺とは
marginを使用する際に、注意しなくてはならないことがあります。marginには縦方向のみ相殺されるという現象が発生します。
どのようなことが起こるかというと、縦方向に別々の要素のmarginが隣接した時、片方のmarginは無効になります。
paddingとは
paddingとは、要素の内側の空間のことです。
赤い部分がpaddingです。画像やテキストはここには表示されない余白になりますが、marginと大きく違うところは、背景色などのスタイルはpaddingには適用されます。
使い分ける時に大きく関係してきますので、これは覚えておきましょう。
marginとpaddingの使い方
それぞれpxで指定していきます。個別に指定していく方法と、ショートハンドという値を書き込むだけでまとめて指定する方法があります。
・上 padding-top: px;
・下 padding-bottom: px;
・右 padding-right: px;
・左 padding-left: px;
個別にしていく方法は上記の様になります。この、topやbottomと言った指示を書かずに指定できるのがショートハンドです。
・上下左右共通 padding: px;
・上下 左右 padding: px px;
・上 左右 下 padding: px px px;
・上 右 下 左 padding: px px px px;
marginの場合も記述の仕方は一緒です。
