图像周围的锚标记会导致填充问题

Question

我有一个带有锚包裹图像的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;}

ISSUE：

如果你可以在底部看到有额外的填充，我假设从一个标签???有谁知道这个的原因？

Answer 1

在图像上应用display: block;可以处理额外的填充。请注意，您在div [{1}}上也有5px填充。

#lineup

实施例： http://jsfiddle.net/H585g/1/

Answer 2

图像为ldapRealm = org.apache.zeppelin.realm.LdapGroupRealm ## search base for ldap groups (only relevant for LdapGroupRealm): ldapRealm.contextFactory.environment.ldap.searchBase=dc ldapRealm.userDnTemplate=cn ldapRealm.contextFactory.url=ldap://test1.com:339 ldap://test2.com:339 ldapRealm.contextFactory.authenticationMechanism = simple ，因此将其视为字符并位于基线上。差距是由为下降器提供的空间（在j，g，y和p等字母上找到的空间）引起的。

使用CSS调整垂直对齐：display: inline

（通过@Quentin）