未知的填充/边距问题

Question

我是一个社交图标＆＃34;这是我列出的ul列表的容器，我看到一个我似乎无法摆脱的填充。

请参阅随附的截图。我已经尝试了很多东西来解决这个问题，我甚至为我的图像设置了一个类，并使用css将margin和padding设置为0。

提前感谢您的帮助。

＆＃13;

＆＃13;

.social-icons {
    float: right;
    width: auto;
    height: 24px;
    padding: 0;
    margin: 13px 0 0 80px;
    background-color: black;
}

.social-icons ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.social-icons ul li {
    display: inline;
    margin: 0;
    padding: 0;
}

.social-icon {
    margin: 0;
    padding: 0;
}

＆＃13;

<div class="social-icons">
    <ul>
        <li><a href="#"><img src="images/Twitter.png" class="social-icon" alt="Twitter icon" height="24" width="24"></a></li>
        <li><a href="#"><img src="images/Facebook.png" class="social-icon" alt="Facebook icon" height="24" width="24"></a></li>
        <li><a href="#"><img src="images/Google-plus.png" class="social-icon" alt="Google+ icon" height="24" width="24"></a></li>
    </ul>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

将font-size: 0px;设置为父div。

请查看此question.

Answer 2

将结束</li>标记保留。

<li>first
<li>second
<li>third

它有效html（无效为xhtml）并解决了由内联元素之间的空格（换行符+制表符）引起的问题，因为浏览器会在下一个元素之前自动插入结束标记开口。

您还需要从inline更改为inline-block，以使浏览器正确处理它。