box-sizingでカラム落ちさせない方法

テキストリンクなどを横並びにする際にボーダーを使ったりしてリンク同士を区切ることがあります。その際のレイアウトなCSSを使ってフロートさせたり、ボーダーをつけたり、幅や余白を指定したりするかと思います。そうすると、場合によってはカラム落ちすることもあります。もちろん、幅をpxで固定してその範囲内に収まるようにすることもできますが、スマートフォンサイトなどの場合は、端末によって横幅が違ってくるので、pxで幅を固定してしまうと横幅が広すぎたり足りなかったりする原因になるので、%などを使って可変レイアウトにしなければなりません。そんなカラム落ちしたときの解決方法として、box-sizingというプロパティを利用します。

box-sizingの使い方

例えば、以下のような指定で2カラムのレイアウトをしたとします。

#list {
  background: #dedede;
}
#list li {
  width: 50%;
  float: left;
  border: 1px solid #bbb;
  text-align: center;
}
#list li a {
  display: block;
  padding: 10px 0;
}

これをHTMLで表示するとおそらく以下のようにカラム落ちしてしまうと思います。

カラム落ちする原因は、2カラムなのでwidthを50%で指定しています。そこにボーダーの1px幅が左右についているためリストの合計幅が50%+2pxとなっているためです。それを解消するために使うのがbox-sizingです。このプロパティを指定することによって、borderやpaddingなどもwidthの幅に含めることができます。実際の指定方法は以下のようになります。

#list li {
  width: 50%;
  float: left;
  border: 1px solid #bbb;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  text-align: center;
}

すると、以下のようにカラム落ちすることなく2カラムで横並びに表示されます。

ちなみに、box-sizingプロパティは「border-box」以外に「content-box」と「inherit」が指定できます。

content-box	widthやheightの値にborder、paddingを含まない（初期値）
border-box	widthやheightの値にborder、paddingを含める
inherit	親要素の値を継承する

以上が、box-sizingプロパティを利用してボックスのカラム落ちを防ぐ方法となります。