【入門】CSSの書き方　〜padding・margin〜

みなさんこんにちは、さくちゃんです。

本日はCSSの中の「padding」と「margin」について紹介していきます。
前回の記事の続きなので、まだ見ていないかたはこちらをご覧ください。

では早速やっていきましょう！

paddingとは？

paddingとは、あるコンテンツの内側の余白のことを指します。

上の図で表すと、ピンクの部分が全てpaddingにあたる。
書き方は

p{padding:20px;}

と書いていく。

余白を取りたい要素を指定し、pxで余白の大きさを指定する。

またpaddin-top、padding-right、padding-bottom、padding-leftと指定すれば、上下左右ずつ指定することができる。
上のpaddingだけの場合が、上下左右全ての内側の余白を指定することになる。

marginとは？

marginはpaddingの逆で、白い部分がmarginに当たります。

これもpaddingと同じで、要素を指定し、pxで余白の大きさを指定します。

p{margin:20px;}

そしてこちらもmargin-top、margin-right、margin-bottom、margin-leftと指定すれば、上下左右ずつ指定することができる。
上のmarginだけの場合が、上下左右全ての外側の余白を指定することになる。

まとめ

padding、marginは結構な頻度で使用しますので、必ず覚えましょう。

では本日は以上になります。ありがとうございました。