Applying margin to th elements

I have to add an unnecessary span in my t开发者_运维知识库h elements in order to get the margin-top to work. Is there a CSS rule I can use to avoid this extra span?

http://jsfiddle.net/VywK7/1/

CSS

table
{
    width:100%;
    border:4px solid gray;
    padding:2px;
}
thead
{
    background-color:gray;
}
th span
{
    display:block;
    margin-top:-4px;
}
th, td
{
    padding:2px;
}

HTML

<table>
  <thead>
    <tr>
        <th><span>Month</span></th>
        <th><span>Amount</span></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$200</td>
    </tr>
  </tbody>
</table>

Sure, here is your fiddle: http://jsfiddle.net/VywK7/4/

CSS

table
{
    width:100%;
    border:4px solid gray;
    padding:2px;
}
thead
{
    background-color:gray;
}
td
{
    padding:2px;
}
th
{
    padding: 0 2px 5px;
    line-height: 15px;
}

HTML

<table>
  <thead>
    <tr>
        <th>Month</th>
        <th>Amount</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$200</td>
    </tr>
  </tbody>
</table>

The -4px margin you added is caused by the borde around the table. So try to remove the top border and you do not need the <span>s (and corresponding CSS) anymore:

table
{
    width:100%;
    border:4px solid gray;
    padding:2px;
    border-top-width: 0px;
}