html - 让 垂直拥抱文本内容

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