html - 让 <DIV> 垂直拥抱文本内容

Question

我正在尝试让 div 元素尽可能紧密地拥抱内容。通过使用 display:inline-block 这对于宽度来说效果很好，但是高度总是有一些额外的 padding/margin/border 。如何让父 div 准确地换行文本？我可以通过合理选择 line-height 来获得它，但这仅适用于特定的字体和大小。

对于任何输入字体或大小，如何让下面的红色框尽可能接近地包裹文本？

示例:

jsfiddle ，带有CSS代码

.outer {
    display:block;   
    background:red;
}
.hug {
    font-size:200%;
    margin:0em;
    border:0em;
    padding:0em;
}

和 html:

<div class="outer">
    <div class="hug">
        <h1>PERFECT FIT</h1>
    </div>
</div>
<div class="outer">
    <div class="hug">
        <h2>PERFECT FIT</h2>
    </div>
</div>

CSS、CCS3 解决方案优先于 JavaScript，除非不可能。

Answer 1

我最终得到了一些不错的结果。如果你改变字体大小，行高可以根据需要保持不变并且非常接近......它需要精确到像素吗？

.thisone{
  display:inline-block;   
  background:#09f;
  min-width:1px;
  font-family:arial;
  width:auto;
  font-size:70px;
  line-height:.70em;
}

DEMO