はじめに

僕は会社ではヘルプデスク業務を主に行っていますが、最近、Webサイトの更新も依頼されるようになりました（人手が足りないので、絶賛兼務中です）。

色々な業務に携わるのはとてもありがたいのですが、なにぶん門外漢なため、夜な夜な業務の合間を縫ってコーディング（HTML・CSS）を自主的に学んでいます。

学んだ中で僕が苦手なのは、タイトルに掲げたように、「margin」の値の指定方法です。「どうやって指定すれば良いのだろう・・・」と忘れてしまうことが度々あります。

ネットを漁ると、CSSの指南をしているサイトや書籍に指定方法が載っていますが、忘れることが多いので、自分の備忘録としてnoteに記載をします。

同じような悩みを抱えてる人の役に立ててれば幸いです。

「margin」の指定方法

CSSでmarginを指定する際のパターンは、4パターンあります。

▼パターン1：すべての値を指定する

「marign：上 右 下 左」と指定する方法です。

＜例＞

marign:50px 50px 50px 50px;

▼パターン2：左右の値をまとめて指定する

「marign：上 左右 下」と指定する方法です。

＜例＞

marign:10px 20px 30px;

▼パターン3：上下と左右の値をまとめて指定する

「marign：上下 左右」と指定する方法です。この書き方は、書籍では「レスポンシブ対応の手段」として紹介されていたので、

＜例＞

marign:0px auto;

上記した例は、書籍では「レスポンシブ対応の手段」として紹介されていたので、覚えておいて損はないと思います。

▼パターン4：上下左右の値をまとめて指定する

「marign：上下左右」と指定する方法です。

＜例＞

marign:0px;

おわり

いかがでしたでしょうか。今回は「margin」の値をどのように指定するのか解説しましたが、この指定方法は「padding」でも同じです。

僕も、どんどん使って覚えていきたいと思います。