Anchor tag around image causes padding issue

Question

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??

HTML:

           <div id="lineup">
                <div class="line-up-click">
                    <p>CLICK TO VIEW THE 2014 OFFICIAL VELD LINEUP</p>
                </div>
                <div class="line-up-overview">
                    <a class="fancybox" href="images/lineup_coming.jpg"><img width="100%" src="http://productnightclub.com/velddev/wp-content/themes/veld-music/images/lineup.png" class="lazyload"></a>
                </div>
            </div>

CSS:

#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;}

ISSUE:

If you can see at the bottom there is extra padding, i assume from the a tag??? Does anyone know the cause of this?

Answer 1

Applying display: block; on the image took care of the extra padding. Do note that you have 5px padding on div #lineup as well.

.line-up-overview img { padding:0; margin:0; display:block; }

Example: http://jsfiddle.net/H585g/1/