title: Anchor tag around image causes padding issue
body: <p>I have an div with a anchor wrapped image, for some reason there is extra padding at the bottom of the div, how can I get rid of this??</p>
  
  <p>HTML:</p>
  
  <pre><code>           &lt;div id="lineup"&gt;
                  &lt;div class="line-up-click"&gt;
                      &lt;p&gt;CLICK TO VIEW THE 2014 OFFICIAL VELD LINEUP&lt;/p&gt;
                  &lt;/div&gt;
                  &lt;div class="line-up-overview"&gt;
                      &lt;a class="fancybox" href="images/lineup_coming.jpg"&gt;&lt;img width="100%" src="http://productnightclub.com/velddev/wp-content/themes/veld-music/images/lineup.png" class="lazyload"&gt;&lt;/a&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#lineup {width:370px; float:left; background-color:#000; padding:5px; text-align:center; margin-right:10px;}
  .line-up-click p {color:#f5d41f; font-size:25px; line-height:58px; text-decoration:none; -webkit-font-smoothing: antialiased; font-weight:normal;}
  .line-up-overview img {padding:0; margin:0;}
  </code></pre>
  
  <p>ISSUE:</p>
  
  <p><img src="https://i.stack.imgur.com/u50qp.png" alt="enter image description here"></p>
  
  <p>If you can see at the bottom there is extra padding, i assume from the a tag??? Does anyone know the cause of this?</p>