【CSS】marginで余白指定してウェブサイトを見映え良く

今回は、cssのプロパティの一つ、marginについて解説していきます。

marginプロパティを使う頻度は、他のcssのプロパティと比べて、高い気がしています。

marginプロパティはその要素に対する外側の上下左右の余白を指定することができます。

ウェブサイトのレイアウトを考えていく上で、余白の取り方って、重要だと思います。

そういう意味でも、marginプロパティってガンガン使っていくべきプロパティと言えるでしょう。

まずは、上下左右、余白をそれぞれ個別に指定する方法から見ていきます。

margin-topプロパティ

margin-topプロパティで、その要素の上側の余白を指定します。

.sample
{
    margin-top: 10px;
}

上の例では、sampleセレクタを指定した要素の上側の余白を「10px」としています。

margin-rightプロパティで、その要素の右側の余白を指定します。

.sample
{
    margin-right: 10px;
}

上の例では、sampleセレクタを指定した要素の上側の余白を「10px」としています。

margin-bottomプロパティで、その要素の下側の余白を指定します。

.sample
{
    margin-bottom: 10px;
}

上の例では、sampleセレクタを指定した要素の下側の余白を「10px」としています。

margin-leftプロパティで、その要素の左側の余白を指定します。

.sample
{
    margin-left: 10px;
}

上の例では、sampleセレクタを指定した要素の左側の余白を「10px」としています。

下の図のようなイメージで、余白を指定したい場合、どのようにすればよいでしょうか。

難しくありませんね。下のサンプルのように指定してやります。

.sample
{
    margin-top: 10px;
    margin-right: 10px;
    margin-bottom: 10px;
    margin-left: 10px;
}

これを下のサンプルのように指定することもできます。

.sample
{
    margin: 10px;
}

marginプロパティに値を一つ指定してやると、上下左右全て同じ余白にすることができます。

同じ余白にするのであれば、この書き方の方が全然、楽ですよね。

それでは、上下左右全てを異なる余白にしたい場合はどうすればよいのでしょうか。

もちろん、margin-topプロパティ、margin-rightプロパティ、margin-bottomプロパティ、margin-leftプロパティ、すべてを書いて、余白を指定してもかまいません。

しかし、下のサンプルのように書くこともできます。

.sample
{
    margin: 10px 20px 30px 40px;
}

「上余白」、「右余白」、「下余白」、「左余白」の順にmarginプロパティに値を指定しましょう。

一行書くだけで上下左右、異なる余白にすることができます。

上下左右、全ての余白を指定する場合は、marginプロパティを使った方がスマートな書き方になることはおわかりいただけたと思います。

margin-topプロパティ、margin-rightプロパティ、margin-bottomプロパティ、margin-leftプロパティは、全ての余白を指定する時ではなく、ある特定の方向の余白だけを指定したい時に使うべきでしょう。

さらに、「上下」と「左右」の組み合わせで値を指定することもできます。

.sample
{
    margin: 10px 20px;
}

上のsampleセレクタは、上下の余白を「10px」、左右の余白を「20px」と指定しています。

「上下の余白」、「左右の余白」の順に、marginプロパティ値を指定することもできます。

marginプロパティについては、さまざまな指定方法がありますので、それを駆使して、スマートな書き方を心がけましょう。

中央揃えや、左右寄せにするプロパティと言えば、「text-align」プロパティを思い起こす方も多いはずです。

ただ、「text-align」プロパティは文字通り、文字要素のレイアウトを調整するのによく使われます。

divタグなどの子要素を親要素に対し、中央揃えする場合、marginプロパティを使うことができます。

.sample
{
    width: 100px;
    margin: 10px auto; 
}

上下の余白は10px、左右の余白は「auto」と指定してやります。

左右の余白を自動（auto）してやるわけです。

ただ、当たり前ですが親要素が100pxより大きくないと子要素は中央揃えになりませんのでご注意ください。

つまり、親要素があって、活きてくる書き方になります。

CSSでウェブサイトのレイアウトしていこうってなった時、結構、使える書き方だと思います。

余白に関するCSSのプロパティについて、下の記事も参考にしてみてください。