未知的填充/边距问题[重复]答案

【问题标题】：Unknown padding/margin issue [duplicate]未知的填充/边距问题[重复]
【发布时间】：2015-12-18 00:57:22
【问题描述】：

我是一个带有“社交图标”类的 div，这是我的 li 之间的 ul 列表的容器，我看到一个我似乎无法摆脱的填充。

请参阅随附的屏幕截图。我已经尝试了很多方法来解决这个问题，我什至为我的图像设置了一个类，并使用 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>

【问题讨论】：

如果你浮动它们而不是使用内联显示，它将删除它们之间的空白。其他解决方案如下。
谢谢，解决了。将字体大小设置为 0 也可以。
@RichardRodgers 请考虑接受答案。它可能会帮助其他有同样问题的人。
当然，我忘了。谢谢！

标签： html css margin padding

【解决方案1】：

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

请看一下这个question.

【讨论】：

这是一种不好的做法（黑客）！（链接也坏了。）
链接已修复。但我认为它在大多数浏览器中更像是一个错误，而不是不好的做法。
不是。间隙是两个元素之间的空白，从逻辑上讲，您无法区分两个跨度中具有不同背景颜色的两个单词之间的区别，它们之间有一个透明的空格，或者两个带有图标的内联（-block）-ed 列表项。您也可以在一行中编写整个 html，从而在标签之间没有空格，或者您可以对您的 html 服务器端进行此更改（缩小），这样您就可以首先避免这些“问题”。所以不，这不是（所有）浏览器中的错误，而是根本不了解 html 渲染的工作原理！

【解决方案2】：

留下结束的</li>标签。

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

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

你还需要把inline改成inline-block，才能让浏览器正确处理。

【讨论】：

你的解决方案没有解决问题，我把“”标签去掉了。图标之间的空白仍然存在。
你必须使用inline-block！答案已编辑。