heightLine.jsで高さがうまく揃わない時

heightLine.jsが効いてはいるのに、高さがうまく揃わないことって最近結構起こっているんじゃないかと思うんですよね。
期待したよりも広がらないって言うか、若干めり込んじゃう感じのやつ。

最近、利用が広がってきている（と思われる）、cssのbox-sizingというのとheightLineがぶつかります。

通常、ボックス要素の幅・高さというのは、padding、borderを抜いた数値です。
が、「box-sizing:border-box」を指定すると、これらを含んだ数値がwidth、heightになるのですね。

具体例で言うと、

height:100px;
padding:10px;
border:10px #000 solid;

とか指定した場合、デフォルトでは高さ100pxのボックスに上下のpaddingとborderの合計40pxが加算され、全体では140pxの高さのオブジェクトができます。

しかし、これに「box-sizing:border-box」を追加した場合は、全体が100pxの高さのオブジェクトになるのです。
ブラウザのデバグツールでみると、計算後の高さは60pxになっています。
（Chromeの場合、「要素を検証」で、「Computed」のタブを参照。

paddingやborderを後から変更しても高さは100pxのままになるので、まずざっと配置を決めてから後で微調整が入る場合には楽。

しかし、heightLineをこれと合わせて使うとpaddingの分だけめり込んじゃうんですね。

ださい解決法ですが、heightLineを使っている箇所は高さが可変になっている（指定していない）はずだし、他に影響与えたくないので、その要素だけ「box-sizing:content-box」として、旧来の表示方法に戻してあげるのがカンタンかな。