プログラミング

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

スポンサーリンク

pcdesk

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

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

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

margin とは

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

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

コード

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

4方向をそれぞれ設定する場合

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

4方向まとめて表記する場合

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

上下と左右をそれぞれまとめる場合

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

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

左右だけまとめる場合

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

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

まとめ

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

年収UP率93.8% / 平均年収UP額126万円のエンジニア転職サイト【転職ドラフト】

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

スポンサーリンク

-プログラミング
-, , , , , , ,

© 2022 サカらいふ Powered by AFFINGER5