はじめに

WEBサイトを作るにあたって要素（h1やdivなどのこと）の空間の種類の理解はとても重要になっています。それぞれ内側から「content(内容)」「padding」「border」「margin」となっています。WEBサイトを作るにあたって、自分が思い通りのコンテンツを配置できるようになるためには、この要素ごとの空間の種類を理解する必要があります。

marginとは

まず、marginとは？というところから記述していこうと思います。

先に記述したように「margin」は要素の中でいうと一番外側にあたる部分です。いわゆる余白となる部分で、WEBサイト全体を見たときに要素ごとの配置を決める重要な役割を担っています。また、marginは余白としての役割しかないので、基本的には色をつけることや文字を入れることはできません。つまりコンテンツとコンテンツの隙間（空間）の値を決めるときに使われています。

marginの書き方

CSSでmarginを記述する場合いくつかのパターンがあるのでそれぞれ記述していこうと思います。

１全体に同じ値の余白を入れる

例）margin: 4px;

この場合指定したコンテンツの上下左右それぞれに4pxのmargin（余白）を作ることができます。決められた値で統一した余白を作りたい場合おすすめです。

２上下左右のうち一つに余白を入れる

例　上部に余白を入れる）margin-top: 4px;

先ほどと比較してみると「margin」の隣に「-top」という文字が追加されています。

これは上部のみにmarginを指定したい場合の記述です。marginの隣に-（ハイフン）と上下左右（それぞれ時計回りに、「top」「right」「bottom」「left」と記述します）の記述を入れることで、より細かく余白の値を指定することができます。

３上下に（または左右）に余白を入れる

例　上下に余白を入れる）margin: 4px 0;

２番目の記述と比較すると「-top」が省略されています。その代わり「4px」という値の隣に「0」という値が追加されています。この「４px」というのは上下を意味していて、その隣にある「0」は左右を意味しています。上下と左右で違ったあたいの余白を使うときにこのような記述をsたりします。また、２番目の例のように一つずつ値を記入していく方法でも同じように余白を作ることができます（慣れると省略する方法が便利になったりしたす）。

４上下左右に別々の値の余白を作る

例）margin: 4px 3px 2px 1px;

３番目の記述の仕方の応用のようなものですが、あたいの順番が先ほどと変わっています。

4pxの余白になっているものが上部にあたり、3pxの余白にあたるのが右側にあたり 2pxの余白にあたるのが下部になり 1pxにあたるのが左側になります。記述の覚え方でいうと上部から時計回りで余白の値を決めると理解すれば大丈夫です（あとは慣れが必要）。

５決めた数値に対して「マイナス」や「プラス」を付け加える

例 コンテンツ上部に10pxの余白に−２pxを追加で加える）margin-top: calc(10px – 2px);

少し難しい書き方になりますが、値を入れるところのcalc()と記述することで数値の引き算や足し算を反映させることができます。自分は、％の値の余白に数pxを引いたりするときなど細かい値の設定に使ったりしています。

marginの相殺

様々なmarginの記述方法を書きましたが、WEBでコンテンツを配置するにあたって重要な注意点を説明していこうと思います。コンテンツを縦に並べたときmarginどうしがあたる場合、marginどうしがかさる（相殺される）現象があります。例えば上のコンテンツがmargin-bottm: 20px;に設定してあり、下のコンテンツがmargin-top: 15px;と設定してあった場合、WEBサイトとして表示される余白の値は20pxになります。つまりmarginどうしがブロックのように積み上がるわけではなく、重なり合って表示される性質があります。そのため上のコンテンツであるmargin-bottom:20pxのなかに下のコンテンツのmargin-top:15pxが入り込んでいる形になります。これを理解しておかないとWEBサイトを作るときに思った配置ができない可能性があります。解決策としてはコンテンツに入れる余白を上下に決めておくなどがあります（自分は基本的にコンテンツの下側のみに余白を設定しています）。

まとめ

今回は余白について記述してみましたが、WEBサイトを作るにあたってとても重要な要素になるため理解しておくと便利だと思います。