Zenbackの関連する記事で横がくっついていた！原因はBootstrapだった！

このブログでは「Zenback」を利用して、関連する記事（画像＋テキスト）を表示しています（2016年11月23日時点では利用していません）。

たぶん、Bootstrapを3.0.3にしたときからなのでしょうが、その関連する記事同士の横の空きがなくなり、くっついた状態で表示されていました。

今回はその原因と、修正方法を紹介します。

くっついた原因を探る

まずは、くっついた原因を探ります。こんなときは「Firebug」の出番です！

• Firebug :: Add-ons for Firefox

ポチ、ポチッとして、CSSをいじってみると原因が判明しました。

*, *:before, *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box
}

どうやらbox-sizingプロパティの値がborder-boxになっていたからのようです。

box-sizingプロパティをcontent-boxにする

ということで、Zenbackの関連する記事の部分だけ、box-sizingプロパティの値がcontent-boxになるようにしました。

#zenback-related-article .hasthumb {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
}

以上で、横が離れて表示されるようになりました。