<div> 正在添加我没有指定的额外边距

Question

这里是问题的演示：http://jsfiddle.net/DerekL/jL69M/4/

我正在尝试为每个块添加 3px 的边距，以便它们彼此分开。正如预期的那样，最初没有margin: ...，所有块都会在水平和垂直方向上相互粘连。当我添加margin-bottom: 3px 时，浏览器确实在底部添加了 3px 的边距，但它似乎也在底部添加了另一个 ~5px。这很令人沮丧，因为我什至无法选择浏览器生成的空间。

那么这些空间究竟是什么？我怎样才能摆脱它们？

Answer 1

这是由浏览器设置的默认line-height引起的。通过将其设置为 0，每个 div 将相互堆叠而没有额外的空格。由于 div 设置为inline-blocks，它们的行为类似于<img> 等内联元素。行高将应用于行，这将影响所有内联元素，即本例中的块。

#board{
    line-height: 0px;
}

这样就可以解决问题了。