Sponsored Link
どうしても覚えてほしいプロパティ!「margin」と「padding」
marginやpaddingはボックスの外側と内側の余白の指定のためのプロパティです。
marginは指定要素と周りの間の距離、paddingは指定要素の内側の距離です。
下に画像と一覧表を用意したので見てみましょう。
margin-top | ブロックの外側上部の余白 |
---|---|
margin-bottom | ブロックの外側下部の余白 |
margin-left | ブロックの外側左部の余白 |
margin-right | ブロックの外側右部の余白 |
padding-top | ブロックの内側上部の余白 |
---|---|
padding-bottom | ブロックの内側下部の余白 |
padding-left | ブロックの内側左部の余白 |
padding-right | ブロックの内側右部の余白 |
この通り、marginやpaddingに「-top」や「-bottom」などと付け足すことにより、
どの向きの余白なのかを指定することができます。
今回の場合、<footer></footer>タグの内側にある<div class=”wrapper”></div>タグは、
内側上下左右の余白を20pxずつとっていることになります。
なお、marginプロパティとpaddingプロパティは使用頻度がかなり高いです。
むしろ指定を行わないことの方が珍しいかもしれません。