title: How to get text flush to top/bottom of a table cell
body: <p>I have a table cell with text in it but how can I make the text flush to the top or bottom of the cell (with no padding above it)? I've tried vertical-align, but it's still not quite to the top 'edge'.</p>
  
  <p>My code</p>
  
  <pre><code>&lt;table&gt;
      &lt;tr&gt;
          &lt;td class="foo"&gt;3.2325&lt;/td&gt;
          &lt;td class="bar"&gt;4.5931&lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  
  table {
      border-bottom: 2px solid black;
      border-collapse: collapse;
  }
  table td {
      border-top: 1px solid black;
      border-collapse: collapse;
      background-color: pink;
      padding: 0 10px 10px;
  }
  .foo {
      font: bold 30px arial;
      border-right: 1px solid black;
      vertical-align: top;
  }
  .bar {
      font: normal 16px arial;
  }
  </code></pre>
  
  <p>JSfiddle example: <a href="http://jsfiddle.net/KznxN/2/" rel="nofollow">http://jsfiddle.net/KznxN/2/</a></p>