我正在尝试在http://jsfiddle.net上处理我的问题，但出现了奇怪的行为。请解释一下这些垂直边距（http://jsfiddle.net/C6V3S/）来自哪里？它在jsfiddle.net上出现（至少在Chrome和FF中），但复制粘贴到本地独立文件时不会出现...
更改为简单块后正常工作
用于独立测试文件的示例：
.txt {
display: inline-block;
width: 12px;
height: 12px;
border: none;
padding: 0;
margin: 0;
background: #77FF77;
}
</style>
<div class="btn"><div class="txt"></div></div>
如果您将.txt元素设置为inline-block，则它将被纳入父元素.btn的文本流中。此时，.btn的行高生效，而该行高大于.txt元素的高度。
因此，添加 .btn {line-height: 10px;}（例如）即可解决问题。我看到您已经尝试过影响内部.txt元素的行高，所以您的尝试非常接近。调整字体大小也可以，因为默认的行高是基于字体大小的公式计算得出的。无论如何，关键是在父元素上进行设置，而不是在子元素上。
如果您将内部元素设置为block，则不会出现这个问题，因为那时就没有类似文本的内容，因此根本没有应用行高。
inline-block非常出色且方便，适用于许多情况。但是它们有一个令人烦恼的缺陷：不必要的空格。当您在一个inline-block内嵌套另一个inline-block时，这会导致白色空格的灾难。您可以在David Walsh's博客上阅读有关空格和inline-blocks的所有内容。
处理此问题的方法有很多，但我最喜欢（也是最广泛支持的）解决方法是将其设置为父级inline-block元素：
.btn {
font-size: 0;
}
这里是一个before/after的例子： http://jsfiddle.net/C6V3S/1/
div内部没有任何空格），也不是由于将inline-block放置在另一个inline-block内。这是由于外层div的line-height引起的。如下面的代码所示，红色边框line-height由浏览器设置（并且各浏览器之间有所不同）。只要div内有占据空间的inline或inline-block元素，height就会受到line-height的影响。
有许多方法可以解决这个问题，它们几乎都是做同样的事情：
1) 将内部元素取出流，并重新插入。这将使外层div认为里面没有任何东西，尝试变得尽可能小，然后在重新插入元素时精确地填充空间。最简单的方法是使用float。
2) 使外部元素不占用空间。这将使内部元素定义其父元素的height和width。如前所述，如果你设置font-size: 0，这将使外部元素认为内部的行内元素不占用空间，因此本身不占用任何空间，并紧密地包裹内部元素。也可以通过设置line-height: 0来实现（这是解决问题的完美方法，因为问题是line-height）。
还有其他方法可以使父元素不具有其line-height，但这应该能让你入门了。
这只是“它的工作方式”，但可以解决。最简单的方法是在.btn上设置负边距。它应该适用于任何现代浏览器（如果我没记错，IE8及以上版本）。浮动元素也可以实现您想要的效果。如果您仅仅是因为美观问题而对其有问题，那么完全不同的解决方案是将元素包装在父元素中，将该父元素的background-color设置为所需颜色，并不必担心其子元素的背景。它们将对其下方的任何内容透明，您将摆脱这些视觉障碍。
如果您想继续使用display: inline-block和负边距，但需要让麻烦的第一个元素不向左跳出其父元素，您可以直接针对它进行操作：
.btn {
margin-left: -4px;
}
.btn:first-of-type {
margin-left: 0px;
}
编辑：阅读了另一个答案后，我不确定我是否理解了问题——您是指元素顶部的边距（这将是水平的），还是侧面的边距（垂直的）？
inline-flex、inline-table等方式，看看是否有效。 - markasoftwareinline-flex。 - markasoftware