为什么 display=inline-block 会增加不可控的垂直边距答案

【问题标题】：Why display=inline-block adds uncontrollable vertical margins为什么 display=inline-block 会增加不可控的垂直边距
【发布时间】：2013-11-30 06:11:12
【问题描述】：

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

更改为简单块后可以正常工作

独立测试文件示例： .btn { 填充：0px；边框：1px 纯红色；显示：内联块； }

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

【问题讨论】：

那么，问题出在哪里？
我也遇到过类似的问题，试试inline-flex，inline-table，看看能不能用
是的，jsfiddle.net/markasoftware/C6V3S/2 与 inline-flex 一起使用

标签： html css

【解决方案1】：

这不是由空格引起的（您的 HTML 中的 divs 内没有空格），也不是将 inline-block 放在另一个 inline-block 内。这是因为外部div 的line-height 造成的。正如您从下面的小提琴中看到的那样，红色边框 div 的当前line-height 有一个由浏览器设置的line-height（它因浏览器而异），只要里面有东西在作为inline 或inline-block 项目占用空间的div 中，height 将受到line-height 的影响。

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

1) 把里面的元素从flow中取出来，然后重新插入进去。这样会让外面的div觉得里面什么都没有，尽量变小，然后填满当元素重新插入时，它正好在元素周围留出空间。最简单的方法是floating它。

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

还有其他方法可以使父元素没有其line-height，但这应该可以帮助您入门。

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

【讨论】：

【解决方案2】：

当您制作.txt 元素inline-block 时，它会被带入父.btn 元素的文本流中。此时，.btn 的 line-height 开始生效，它大于 .txt 元素的高度。

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

当你将内部元素设为block 时，你不会遇到这个问题，因为这样就没有类似文本的内容，所以根本没有应用 line-height。

【讨论】：

好的，我知道为什么这些边距会出现在 jsfiddle 上。如果您能解释为什么它们不会出现在独立的测试 HTML 中，那就太好了。我已经为此提供了示例 HTML。
没关系，我自己解决了这个难题。原因是 - 我的示例过于简洁，缺少 DOCTYPE，这导致浏览器以 jsfiddle 以外的其他“标准”呈现 HTML。在独立文件顶部添加“”后，我得到了相同的结果。

【解决方案3】：

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

如果您想在display: inline-block 上坚持负边距，但又希望讨厌的第一个元素不向左跳出其父元素，您可以明确定位它：

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

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

编辑：阅读另一个答案后，我不确定我是否理解了这个问题——你是指元素顶部的边距（水平）还是两侧的边距（垂直）？

【讨论】：

这似乎是关于绿色元素顶部和底部与红色边框之间的空白区域。侧面没有边距。
我现在明白了。你是对的，这不是边际——我不确定它是什么，真的。我猜是一个“空间”。

【解决方案4】：

inline-block 在很多情况下都非常出色和方便。但它们带来了一个烦人的陷阱：不必要的空格。当您将内联块嵌套在内联块中时，会导致空白灾难。您可以在 David Walsh's blog 上阅读有关空格和内联块的所有信息。

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

.btn {
  font-size: 0;
}

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

【讨论】：