块增加了不可控制的垂直边距

我试图在http://jsfiddle.net上摆弄我的问题，并在那里发生了奇怪的行为。 你能解释一下这些（http://jsfiddle.net/C6V3S/）的垂直边缘来自哪里吗？ 出现在jsfiddle.net上（至少在Chrome和FF中），当复制/粘贴到本地独立文件时不显示...

可以更改为简单块

独立测试文件示例：.btn {padding：0px; 边框：1px纯红色; 显示：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>

---

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

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

当您将内部元素设置为一个block时，您不会遇到这个问题，因为那样就没有文本类内容，所以根本没有应用行高。

---

inline-block在如此多的情况下非常出色和方便。 但他们带来了一个恼人的陷阱： 不必要的空白 。 当你在内联块内嵌入一个内联块时，这会导致一场白色空间的灾难。 您可以在David Walsh的博客上阅读关于空格和内联块的所有信息。

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

.btn {
  font-size: 0;
}

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

---

这不是由空白（你的HTML中没有任何内部的div ）引起的，也不是通过将inline-block放在另一个inline-block inline-block内引起的。 这是由于外部div的line-height造成的。 正如你可以从下面看到的那样，红色边框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 ，但是这会让你开始。

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

链接地址: http://www.djcxy.com/p/89257.html

上一篇: block adds uncontrollable vertical margins

下一篇: Different padding when div floats vs when it's full width