Align top of text EXACTLY with top border of container - css

Question

This jsfiddle looks like this:
I want it to look like this (I created this with MS Paint)... flush:
Is there anything I can add to the styles to achieve this?
div {
border: 1px solid blue;
font-size: 50px; // this number should be treated as arbitrary
}

Answer 1

One option is to use line-height. The amount will depend on the font-family you are using. The advantage would be that line-height can directly depend on font-size so it can be dynamic. However, it doesn't have a concept of vertical top and bottom individually (it applies to both) so you won't have that space under the text.
div {
border: 1px solid blue;
font-size: 70px;
font-family: 'Times';
line-height: 0.7; /* This will work for any font-size on 'Times'*/
}
<div>Hello</div>
You could simulate that bottom space by wrapping the text in an element with margin-bottom.
div.outer {
border: 1px solid blue;
font-size: 70px;
}
div.inner {
font-family: 'Times';
line-height: 0.7;
margin-bottom: 20px;
}
<div class="outer">
<div class="inner">Hello</div>
</div>

Answer 2

Another option is to use relative positioning. An advantage of this method over line-height is that the div size does not change.
div {
border:1px solid blue;
font-size: 64px; // works for arbitrary font sizes
}
span{
position:relative;
top:-0.21em;
}
<div>
<span>Hello</span>
</div>
As with line-height, you might have to adjust "-0.21em" depending on your font. -0.21em worked well for me for sans-serif and serif, but not cursive.