Getting <DIV>'s to vertically hug text contents - html

Question

I'm attempting to get a div element to hug the contents as tightly as possible. This works fine for the width by using display:inline-block, but the height always has some extra padding/ margin/ border. How do I get the parent div to wrap the text exactly? I can get it by judicially choosing line-height, but this only works for a particular font and size.
How do I get the red box below to wrap the text as close as possible... for any input font or size?
Example:
jsfiddle, with css code
.outer {
display:block;
background:red;
}
.hug {
font-size:200%;
margin:0em;
border:0em;
padding:0em;
}
and 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 solutions preferred over javascript, unless it isn't possible.

Answer 1

I ended up getting some decent results with this. If you alter the font size the line-height can stay as needed and hugs pretty darn close... Does it need to be to the pixel exactly?
.thisone{
display:inline-block;
background:#09f;
min-width:1px;
font-family:arial;
width:auto;
font-size:70px;
line-height:.70em;
}
DEMO

Answer 2

Here is something I've tried : http://jsfiddle.net/wared/CpZru/. My first attempt (pink) worked only with H2, so, I gave a closer look to this tag's default styles, and noticed that the font size was set to 1.5 (Chrome). Then I used this ratio for my second attempt (blue) : 1 / 1.5 = 0.666.... Although the result is more reliable, the ratio seems not to be valid with a different font weight (1 pixel overflows the P tag's line) or a different font family (green test).
You could calculate the ratio for each font weight/family since both parameters seem to affect the line height ratio. I'm not able to get something more interesting currently. Hope it can help in some way.
<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;
}