让<div>来垂直拥抱文本内容</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

Answer 2

以下是我尝试过的内容：http://jsfiddle.net/wared/CpZru/。我的第一次尝试（粉红色）仅适用于H2，因此，我仔细查看了此标记的默认样式，并注意到字体大小设置为1.5（Chrome）。然后我使用这个比率进行第二次尝试（蓝色）：1 / 1.5 = 0.666...。虽然结果更可靠，但这个比例似乎不是有效的，不同的字体重量（1个像素溢出P标签的行）或不同的字体系列（绿色测试）。

您可以计算每个字体粗细/系列的比率，因为这两个参数似乎都会影响线高比。我目前无法获得更多有趣的东西。希望它能以某种方式提供帮助。

<div class="em1">
    <h1>PERFECT FIT</h1>
    <h2>PERFECT FIT</h2>
    <p>PERFECT FIT</p>
</div>
<div class="em67">
    <h1>PERFECT FIT</h1>
    <h2>PERFECT FIT</h2>
    <p>PERFECT FIT</p>
</div>
<div class="em67 arial">
    <h1>PERFECT FIT</h1>
    <h2>PERFECT FIT</h2>
    <p>PERFECT FIT</p>
</div>

.em1 {
    line-height: 1em;
}
.em1 * {
    background: pink;
    line-height: inherit;
}
.em67 * {
    background: lightblue;
    line-height: .67em;
}
.arial * {
    font-family: Arial;
    background: lightgreen;
}

Answer 3

.outer {
    display:block;   
    background:red;
    float:left;
    clear:both;
}
.hug {
    font-size:200%;
    margin:0em;
    border:0em;
    padding:0em;
}
.hug h1,
.hug h2 {
    margin:0;
    padding:0;
    height:1em;
    line-height:1em;
}