MENU

CSSのmargin-topかmargin-bottomどちらを使うか論争を終結させたい

この記事はフロントエンドエンジニア Advent Calendar 2016の8日目の記事です。

http://qiita.com/advent-calendar/2016/frontend-engineers

CSS-Tricksというブログに面白そうな記事があったので自分なりに考えてみました。margin は top と bottom どちらを使うべきかという内容です。

https://css-tricks.com/margin-bottom-margin-top/

どちら派が多いか

こちらのツイートによると bottom 派が多いようですね。



文章


文章


文章

こんなHTMLがあったとき、p タグと p タグの間だけ margin を指定したいとします。


p 
{
  margin-top: 50px;
}
p:first-child 
{
  margin-top: 0;
}


p 
{
  margin-bottom: 50px;
}
p:last-child 
{
  margin-bottom: 0;
}

:first-child と :last-child を使う方法がありますよね。:last-child はIE9以上でしか使えないため、昔は使われませんでしたが、今ではIE8のサポートも終了して :last-child を使う人が多いですね。その影響で bottom 派が多いそうです。

自分なら

top or bottom


// 隣接セレクタを使う方法
p + p 
{
  margin-top: 50px;
}

// 同じ階層にある要素のセレクタを使う方法もある
p ~ p 
{
  margin-top: 50px;
}

CSSセレクタの説明は省きますが、上記のようにスッキリ書くことができます。意外と知らない方も多いのではないでしょうか？

CSSではあとから打ち消すという記述はあまりすべきではありません。よって、:first-child や :last-child でmargin を0にすべきではないと思います。

よって僕は margin-top を推奨します。

left or right

おまけで left/right についても書いてみます。これはどちらでもよいというのが僕の意見ですが、どちらかを選べと言われたときの理由として説明したいと思います。


<html>
<body>




</body>
</html>


* 
{
  margin: 0;
  padding: 0;
}
.box 
{
  height: 50px;
  background-color: gold;
}

こんなHTMLとCSSを用意します。.box 要素にネガティブマージンを設定するときは意外とあります。


.box 
{
  margin-left: -100px;
}
.box 
{
  margin-right: -100px;
}

この場合、margin-right にネガティブマージンを設定してしまうと横幅が100%+100pxとなってしまいます。しかし、left に指定すれば画面外にしてくれます。

どちらかと言われれば、margin-left 派となります！