title: How to put a bit of space between table footer/header and body content?
body: <p>I want to put a bit of space between HTML table header and footer, and my body content. I though margin-top and margin-bottom would do it, but it does not. Yet the font-weight: bold; directive is taken into account.</p>
  
  <p>My HTML:</p>
  
  <pre><code>&lt;table id="myTbl"&gt;
     &lt;thead&gt;
       &lt;tr&gt;
         &lt;th&gt;My Table Header&lt;/th&gt;
       &lt;/tr&gt;
     &lt;/thead&gt;  
     &lt;tbody&gt;
      &lt;tr&gt;
        &lt;td&gt;My Body Content&lt;/td&gt;
      &lt;/tr&gt;
      &lt;/tbody&gt;
     &lt;tfoot&gt;
       &lt;tr&gt;
         &lt;th&gt;My Table Footer&lt;/th&gt;
       &lt;/tr&gt;
     &lt;/tfoot&gt;  
  &lt;/table&gt;
  </code></pre>
  
  <p>My CSS:</p>
  
  <pre><code>#myTbl {
      font-weight: normal;
  }
  
  #myTbl thead {
      font-weight: bold;
      margin-bottom: 10px;
  }
  
  #myTbl tfoot {
      font-weight: bold;
      margin-top: 10px;
  }
  </code></pre>
  
  <p>The JSFiddle is available <a href="http://jsfiddle.net/nCe3k/1/" rel="noreferrer">here</a>. I am using Chrome.</p>