为什么display = inline-block会增加无法控制的垂直边距

Question

我试图在http://jsfiddle.net上解决我的问题并且在那里有最奇怪的行为。你能解释一下这些（http://jsfiddle.net/C6V3S/）垂直边距来自何处？是否出现在jsfiddle.net上（至少在Chrome和FF中），在复制/粘贴到本地独立文件时不会出现...

在更改为简单块后工作正常

独立测试文件的示例：          .btn {         填充：0px;         边框：1px纯红色;         display：inline-block;     }

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

Answer 1

当您创建.txt元素inline-block时，它将被带入父.btn元素的文本流中。此时，.btn的行高开始，大于.txt元素的高度。

所以，添加.btn {line-height: 10px;}（例如）并解决您的问题。我看到你已经试图影响内部.txt元素的行高，所以你的尝试非常接近。调整字体大小也可以，因为默认的行高是基于字体大小的公式。无论如何，关键是要在父元素上执行，而不是在子元素上执行。

当你将内部元素设为block时没有这个问题，因为那时没有类似文本的内容，所以根本没有应用行高。

Answer 2

inline-block对于这么多案例来说非常棒且方便。但它们带来了一个恼人的陷阱：不必要的空白。当您在内联块中嵌套内联块时，会导致白色空间灾难。您可以在David Walsh's blog上阅读有关空格和内联块的所有内容。

有很多方法可以解决这个问题，但我最喜欢的（也是最广泛支持的）解决方案是将其设置为父inline-block元素：

.btn {
  font-size: 0;
}

以下是之前/之后的示例： http://jsfiddle.net/C6V3S/1/

Answer 3

这不是由空格引起的（您的HTML中div内没有任何内容），也不是将inline-block放在另一个inline-block内。这是因为外line-height的{​​{1}}造成的。正如您从下面的小提琴中看到的那样，红色边框div的当前div有line-height由浏览器设置（并且因浏览器而异），并且只要line-height内部有一些内容会占用div或inline项，inline-block会受到height的影响。

有很多方法可以解决这个问题，他们几乎都做同样的事情：

1）将内部元素从流中取出，然后重新插入。这将使外部line-height认为其内部没有任何内容，并尽量变小，然后当它插回时，在元素周围填充空间。最简单的方法是div它。

2）使外部元素不占空间。这将使inside元素定义其父元素的float和height。如果你执行width，如前所述，这将使外部元素认为内联元素不占用空间，因此本身不占用任何空间，并将自身紧紧包裹在内部元素周围。这可以通过设置font-size: 0来完成（这是问题的完美修复，因为问题是line-height: 0）。

还有其他方法可以让父元素没有line-height，但这应该让你开始。

http://jsfiddle.net/C6V3S/4/

Answer 4

这是“它是如何工作的”，但它可以解决。解决问题的最简单方法是在.btn设置负边距。它适用于任何现代浏览器（IE8及以上版本，如果我记得的话）。浮动元素也应该达到你想要的。作为一个完全不同的解决方案，如果您的问题仅仅是美学，您可以将元素包装在父级中，将父级background-color设置为您想要的内容，而不必担心其子元素的背景。它们对于它们下面的任何东西都是透明的，你将摆脱那些视觉休息。

如果你想在display: inline-block上坚持使用负边距，但是需要那个讨厌的第一个元素不要向左跳出它的父元素，你可以明确地定位它：

.btn {
    margin-left: -4px;
}

.btn:first-of-type {
    margin-left: 0px;
}

编辑：在读完另一个答案之后，我不确定我是否理解了这个问题 - 你的意思是元素上的边距（水平方向）或边缘边缘（垂直方向）？