CSSには、余白を与えるプロパティが用意されている。marginとpaddingだ。いずれもスペースを空けるために使うことは、周知のとおりだが、これを正しく使い分けできていないサイトを見掛ける。marginを使うべき箇所にpaddingを用いたり、またその逆もあったりする。

なぜmarginとpaddingを誤って使ってしまうのだろうか？スタイルシートには、margin,paddingそれぞれの定義がなされているにも関わらずだ。

それについて私の見解は、コーディングでCSSボックスモデルを意識していないためではないかと考えている。

CSSボックスモデルは、スタイルレイアウトするうえでとても重要な概念で、Webサイトコーディングにおいて必要不可欠な知識だといえる。

ボックスモデル知識の有無がコーディングクオリティに影響するし、もしマスターすることができれば、あなたのマークアップ能力が大きく向上するだろう。

このエントリーは、CSSボックスモデルの理解を深めてもらうことが目的である。

ボックスモデルについて

ボックスモデルとは、矩形からなる領域のこと。文章や画像などのコンテンツとそれを梱包する周辺領域で構成されている。

content(コンテンツ)領域

content領域は、内容物に依存して矩形領域を形成する。

文章や画像、動画があることで成り立つ包含ブロックである。つまり文章などのコンテンツ量に応じて、その存在を認めることができるか否かが決まる。もちろん空要素であってもボックスモデルは存在するわけで、目視できないというわけだ。

さらに横幅（width）と縦幅（height）のCSSプロパティ指定によってもcontent領域サイズを変えられる。

padding(パディング)領域

padding領域は、content領域を囲って矩形領域を形成して「要素内の余白」を担う。

padding領域には、上下左右に区分されていて、それぞれpadding-top,padding-right,padding-bottom,padding-leftで拡張できる。これらを省略してpaddingの一括指定でもよい。

border(ボーダー)領域

border領域は、padding領域を囲って矩形領域を形成して「要素の境界線」を担う。

そしてborder領域は、上下左右に区分されていて、それぞれborder-top,border-right,border-bottom,border-leftで拡張できる。これらを省略してborderの一括指定でもよい。

margin(マージン)領域

margin領域は、border領域を囲って矩形領域を形成して「要素外の余白」を担う。

そしてmargin領域は、上下左右に区分されていて、それぞれmargin-top,margin-right,margin-bottom,margin-leftで拡張できる。これらを省略してmarginの一括指定でもよい。

ボックスモデルのアンチパターン

これまでボックスモデルについて説明してきたが、概念的なもののため、分かりづらく感じたかもしれない。説明とはそういうものだとご容赦いただきたい。

そこで既存サイトのアンチパターンで説明してみようと思う。

既存サイトは、コーダーの解釈でスタイルが済んでいて、ボックスモデルの理解の良し悪し判断できる。そしてアンチパターンならば、margin,padding,borderの関係がイメージしやすいかもしれないというわけだ。

さてアンチパターンだが、サンプルを探すのに苦労しなかった。自社サイトでいくつか発見することができたから、それを紹介しよう。

ブルーのハイライトがcontent領域で、オレンジのハイライトがmargin領域を表している。

この要素の悪いところは、marginの使い方だ。marginは「要素外の余白」を担うものだった。要素同士を離すために使うのがベスト。ところが下と左を空けるためにmarginを使っている。誤りとは言い切れないが、違和感を感じてしまう。

このようなケースなら、梱包要素でpaddingによる「要素内の余白」が適切ではないだろうか。

この要素の悪いところは上記パターンと同様に、marginの使い方だ。左の余白は梱包要素の「要素内の余白」で表現すればよい。そして上の余白は、ただただダメだ。この要素はliタグで、それを囲むulタグが存在する。ulタグの上部余白とするのがよいだろう。

このケースもmarginが問題だ。ただborder-leftを表現しなければならない都合上、padding-leftを使うわけにもいかない。paddingで左余白を付けてしまうと境界線は左付きになってしまうからだ。

このようなケースは時々に遭遇する。ボックスモデルは理解していても、妥協を余儀なくされるものかとも思うが、代替案はある。

/* ベーシックパターン */
セレクタ {
  margin-left: 80px;
}
/* 代替パターン */
セレクタ {
  display: inline-block;
  position: relative;
  left: 80px;
}

position: relative;で基準位置から右に80pxズラして、80px分はみ出さないようにdisplay: inline-block;としている。あるいは梱包要素でoverflow: hidden;とするのもよいだろう。

ボックスモデルを説明するエントリーだから、代替案を示してはいるが、ベーシックパターンを採用しなければならないときもある。とても厄介なところだ。

だがそもそも、HTML構造でなんとかなることが少なくない。遭遇した場合は、じっくり考えてみてほしい。

この要素の悪いところは、paddingだ。要素内の余白を担うpaddingで、要素同士を離している。marginで余白を設けるべきところだ。だがそれよりもpaddingを適用しているのが、imgタグであるところが、ただただダメだ。梱包要素で余白を担当させればよい。それならばmarginだろうが、paddingだろうが使い道はあるはずだ。

ここまで来るとお分かりいただけると思うが、悪いところは、marginだ。要素同士を離すというわけでも無いのだから、marginではないことが分かる。したがって要素内の余白を担うpaddingを適用すればよい。

まとめ

便宜上「ボックスモデルのアンチパターン」という表現をしてきたが、そもそもボックスモデルにアンチパターンというものはなく、コーダーのソースコードに発生するものだ。

無思慮に取り組むと上記アンチパターンが起こり得ることを知ってもらえたならば嬉しく思うとともに、このエントリーが、あなたのクリエイティビティを刺激するものであると期待したい。