Q:

Getting 's to vertically hug text contents

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.

A:

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

