androidのchromeで下記の様にフォントサイズ12px以下だとline-heightがおかしくなる。

<div style="background-color: #333333; color: #ffffff; font-size: 10px; line-height: 30px; text-align: center;">
ほげほげほげほげほげほげほげほげほげ
</div>

<div style="background-color: #333333; color: #ffffff; font-size: 12px; line-height: 30px; text-align: center;">
ほげほげほげほげほげほげほげほげほげ
</div>

背景とかつけるとかなり狂っているのが確認できました。
そもそも小さく作るのはよろしくないんだな。。。

androidのchrome限定なのでshareは低いかもしれませんが。

サンプル
http://bh0505.com/test/sp/line_h.html

iphone でボックスを下記の様に３つ並べると右が空いてしまう。

<div style="width: 100%;">
<div style=" float: left; background-color: #FF0004; width: 33.3%;">左</div>
<div style=" float: left; background-color: #0CC915; width: 33.4%;">中</div>
<div style=" float: left; background-color: #032ABC; width: 33.3%;">右</div>
</div>

びしっと端に左右を揃えたい場合は
display:tableとtable-layout: fixed;とdisplay:table:cellを活用してどうにかできました。

<div style="width: 100%; display: table; table-layout: fixed;">
<div style=" display: table-cell; background-color: #FF0004;">左</div>
<div style=" display: table-cell; background-color: #0CC915;">中</div>
<div style=" display: table-cell; background-color: #0F9BC5;">右</div>
</div>

サンプル
http://bh0505.com/test/sp/box3.html