[コーディングの基礎]「margin」と「padding」

どうしても覚えてほしいプロパティ!「margin」と「padding」

marginやpaddingはボックスの外側と内側の余白の指定のためのプロパティです。
marginは指定要素と周りの間の距離、paddingは指定要素の内側の距離です。

下に画像と一覧表を用意したので見てみましょう。

この通り、marginやpaddingに「-top」や「-bottom」などと付け足すことにより、
どの向きの余白なのかを指定することができます。

今回の場合、<footer></footer>タグの内側にある<div class=”wrapper”></div>タグは、
内側上下左右の余白を20pxずつとっていることになります。

なお、marginプロパティとpaddingプロパティは使用頻度がかなり高いです。
むしろ指定を行わないことの方が珍しいかもしれません。