【CSS】marginの表記方法これでもう迷わないスッキリしたコーディングへ

プログラミングを勉強中のみなさん、こんにちは！

今回は、marginの表記方法について紹介します。
初心者向けのメモ書き程度として執筆しておりますので、あしからず。

それでは見ていきましょう。

margin　とは

marginは要素の外側の余白です。
余白を適切に使うことにより、見やすいWebサイトを作ることができます。

ちなみに、要素の内側の余白を　padding と言います。

marginの設定方向は４つです。
上　右　下　左　です。

上　margin-top:●●px;
下　margin-bottom:●●px;
左　margin-left:●●px;
右　margin-right:●●px;

margin: ○px △px □px ☆px;
このような表記となります。
左から順番に、
上の余白、右の余白、下の余白、左の余白、
と、時計回りです。

margin: ○px △px;
このような表記となります。
左の数値が上下の余白、右の数値が左右の余白です。

厳密に言うと、
上と下の余白が○px、
右と左の余白が△px、
となります。

margin: ○px △px　□px;
このような表記となります。
左の数値が上の余白、中央の数値が左右の余白、右の数値が下の余白です。

詳細はこちらを参照してみてくださいね。
marginとpadding

むやみに余白設定するより、まとめられるところはまとめましょう。
スッキリしたコーディングになります。

marginに関連する記事も紹介しておきます。