未知 padding/margin 问题

Question

我有一个 div 和 "social-icons" 的 class 这是我的 li 之间的 ul 列表的容器我看到了一个我似乎看不到的填充摆脱。

请参阅附件中的屏幕截图。我已经尝试了很多方法来解决这个问题，我什至为我的图像设置了 class 并使用 css.

将边距和填充设置为 0

提前感谢您的帮助。

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

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

Answer 1

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

请看这个

Answer 2

离开结束 </li> 标签。

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

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

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

未知 padding/margin 问题

Unknown padding/margin issue

html

css

margin

padding