html - 图像周围的 anchor 标记导致填充问题

Question

我有一个带有 anchor 包裹图像的 div，由于某种原因，div 底部有额外的填充，我该如何摆脱它？

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

问题:

如果你能看到底部有额外的填充，我假设来自 a 标签？？？有谁知道这是什么原因？

Answer 1

在图像上应用 display: block; 处理额外的填充。请注意，您在 div #lineup 上也有 5px 内边距。

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

例子: http://jsfiddle.net/H585g/1/