如何为span或div提供最适合其文本内容的大小？

Question

例如，在此模拟渲染中，橙色背景表示只包含所有包含文本的封闭span或div元素的范围：

如果这太过于希望，那么第二好的就是这样：

在第二种情况下，顶部和底部边缘的位置与文本的baseline和mean line重合。

绝对至少，我很想学会如何可靠地排列span或div的底部，以便它与文字的基线。即使这个看似简单明了的任务也无法实现。 （我的成功率约为50％，AFAICT完全随机。）

下面我展示了迄今为止的最佳尝试。我的结果大部分都很糟糕。确实，对于一种字体，我非常接近上面显示的第二种情况，但我怀疑这只是一个幸运的巧合，从同样的CSS与其他字体的差异来判断。

下面的代码段（或jsFiddle）。点击整页以获得最佳效果。

* { vertical-align: baseline !important; }

#root  { padding: 20px; }
td     { padding: 0px; }

.monospace    { font-family: monospace; }
.proportional { font-family: tangerine; }

.ground     { padding: 10px; }
.ground > * { margin: 10px; }
.ground > * { font-size: 50px; }
.ground > * { background: orange; }
.ground > * { display: inline-block; }

.tweak-heights
.ground   * { height: 1ex; }
.tweak-heights
.ground   * { line-height: 0; }
.tweak-heights
.ground > * { margin: 20px 10px; }

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">

<div id="root">
<div style="display: block; width: 100%; text-align: right;"><div style="display: inline-block; margin: 0 50px 0 0;">(Click on FULL PAGE for best results.)</div></div>

    <table>
        <tr><td>
<div class="ground">
    <span class="q monospace">Smallest SPAN&nbsp;0123456789</span><br/>
    <span class="q proportional">Smallest SPAN&nbsp;0123456789</span><br/>
        </td></tr>
        <tr><td class="tweak-heights">
<div class="ground">
    <span class="q monospace">Smallest SPAN&nbsp;0123456789</span><br/>
    <span class="q proportional">Smallest SPAN&nbsp;0123456789</span><br/>
        </td></tr>
    </table>

</div>