title: Extra space from line-height when vertically aligning things with CSS
body: <p>I often have to vertically align an image with a block of text next to it.</p>
  
  <p>Like so:
  <img src="https://www.dropbox.com/s/567dufyz0puzqgj/Screenshot%202015-05-06%2010.42.43.png?dl=1" alt=""></p>
  
  <p>It the problem is that because of the line-height of the text, there is the appearance of an extra space above the text:</p>
  
  <p><img src="https://www.dropbox.com/s/j4wxs9kneu2pn7q/Screenshot%202015-05-06%2010.38.58.png?dl=1" alt=""></p>
  
  <p>I can't just remove the line-height because this is a multiline text block that needs a luxuriously large line height. </p>
  
  <p>The only solution I've come up with is to apply a  <code>margin-top: -5px</code> to the top of the text so it becomes optically aligned with the image.</p>
  
  <p>However this seems like a brittle solution since any change to the line-height of the page will throw off the alignment. </p>
  
  <p>Is there a more bulletproof solution?</p>