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:

enter image description here

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

JSfiddle would be helpful. You could also just use javascript for an onclick event. — Brandon Kiefer, Mar 21 '14 at 16:16
the cause if the `baseline` alignment of images. possible duplicate of [Extra padding under an tag?](http://stackoverflow.com/questions/3128061/extra-padding-under-an-img-tag) — Fabrizio Calderan, Mar 21 '14 at 16:19

Stuart Kershaw · Accepted Answer · 2014-04-24T14:22:40.043

17

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/

edited Apr 24 '14 at 14:22

answered Mar 21 '14 at 16:16

Stuart Kershaw

16,831
6
37
48

I would also add display:block to the anchor as well as sometime it can cause problems with the clickable area in different browsers – Pete Mar 21 '14 at 16:19

score 0 · Answer 2 · answered Dec 18 '19 at 18:11

The image is display: inline so it is treated like a character and sits on the baseline. The gap is caused by the space provided for the descender (which you find on letters like j, g, y and p).

Adjust the vertical-align with CSS: img{vertical-align: bottom}

(by @Quentin)

Anchor tag around image causes padding issue

2 Answers2