【CSS】marginの書き方とよく使うテクニックをサクッとご紹介

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

今回は、marginの書き方とよく使うmarginのCSSコードを紹介します。

marginは要素の外側の余白です。

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

そのmarginのよく使うコードとは、中央寄せ、左右どちらかに寄せる、この２つです。

よく使う、というか使いまくりです。

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

marginの書き方

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

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

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

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

margin: ○px △px □px ☆px;

すなわち

margin: 上 右 下 左;

となります。

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

margin: ○px △px;

左の数値が上下の余白、右の数値が左右の余白です。

すなわち

margin: 上下 　左右;

となります。

左右だけまとめる場合

margin: ○px △px　□px;

左の数値が上の余白、中央の数値が左右の余白、右の数値が下の余白です。

すなわち

margin: 上　左右　下 ;

となります。

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

よく使うmarginのコード

ブロック要素の中央寄せ

ブロックの中央寄せは margin; 0 auto です。

めちゃめちゃ使います。

See the Pen
margin by t.h (@tomtom15)
on CodePen.

ブロック要素の右寄せ

右寄せはこの２つを記述します。

margin-right: 0;
 margin-left: auto;

See the Pen
margin-right-yose by t.h (@tomtom15)
on CodePen.

ブロック要素の左寄せ

左寄せはデフォルトです。

cssを設定しなくても、勝手に左寄せになります。

まとめ

いかがでしたでしょうか。

mariginの表記はなるべくまとめる書き方の方が見やすいです。

１行で済みますしね。

また、ブロック要素の中央寄せ・右寄せはたくさん使うので、ぜひ参考にしてください。

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

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