title: Aligning text block with top of container
body: <p>I'm trying to achieve the <em>equivalent</em> of (I know it is not actually permitted in CSS) :</p>
  
  <p><code>{padding-top : -3x }</code></p>
  
  <p>In this original <a href="http://jsfiddle.net/hotbelgo/3cpQz/" rel="nofollow">fiddle</a> you can see that I want my h2 content to be aligned with the very top and bottom of the enclosing block element. </p>
  
  <p>My -ve <code>margin-left</code> works, but a -ve margin-top moves the enclosing element upwards (taking the <code>h2</code> with it).  What I want is for the white letters to bleed into the background, so I need to be able to move the text to the top of the enclosing block element and reliably to set the vertical height of the <code>&lt;header&gt;</code> so that the bottom edge also bleeds into the background. So far it is very trial-and-error which I suspect will mean that it fails on other browsers, but I can't find any css options that do a better job.</p>
  
  <p>Based on the first two first two answers, I have updated the <strong><a href="http://jsfiddle.net/hotbelgo/3cpQz/11/" rel="nofollow">fiddle</a></strong>, but I'm still left with the <code>3em</code> font and <code>2.05em</code> line-height for the container (and having heard that you should <strong>not</strong> generally add units to line height as well, which would lead me toward a <a href="http://jsfiddle.net/hotbelgo/3cpQz/10/" rel="nofollow">line height of 0.7</a>) and wondering whether that is a robust relationship (and if so how is it expressed mathematically) across all situations including mobile phones?</p>