title: Reduce clickable area for link
body: <p>I have one word on a page and each separate letter is a link.  I'd like to reduce the size of the clickable area so that there is no space surrounding the letters. Right now it's fine on the left and right of each letter, but there is too much space above and below each letter.  I included a border around the links for illustrative purposes (see fiddle below).</p>
  
  <p>Any ideas on how?</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;body&gt;
    &lt;div&gt;
      &lt;h1&gt;&lt;a href=#&gt;H&lt;/a&gt;&lt;/h1&gt;
      &lt;h1&gt;&lt;a href=#&gt;E&lt;/a&gt;&lt;/h1&gt;
      &lt;h1&gt;&lt;a href=#&gt;L&lt;/a&gt;&lt;/h1&gt;
      &lt;h1&gt;&lt;a href=#&gt;L&lt;/a&gt;&lt;/h1&gt;
      &lt;h1&gt;&lt;a href=#&gt;O&lt;/a&gt;&lt;/h1&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>    body {
          font-family: 'Sigmar One', cursive;
          font-size: 100px;
          color: white;
          text-shadow: 4px 4px 4px #000;
  
          background-color:blue;
  
          width: 100%;
          height: 100%;
          margin: 0;
      }
  
      a {
          border: 1px solid black;
      }
  
      div {
          position:absolute; 
          height:100%; 
          width:100%;
          display: table;
      }
  
      h1 {
          display: table-cell;
          vertical-align: middle;
          text-align:center;
      }
  
      a:visited, a:active {
          text-decoration: none;
          color: white;
      }
  
      a:link {
          text-decoration: none;
          color: white;
          text-shadow: 0px 2px 3px rgba(255,255,255,.25);
          -webkit-background-clip: text;
             -moz-background-clip: text;
                  background-clip: text;
      }
  
      a:hover {
          text-shadow: 4px 4px 4px #000;
          color: white;
      }
  </code></pre>
  
  <p><strong>FIDDLE:</strong>
  <a href="http://jsfiddle.net/8Huu7/10/" rel="noreferrer">http://jsfiddle.net/8Huu7/10/</a></p>