<div> s正在添加额外的保证金，我没有指定</div>

Question

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

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

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

Answer 1

这是由默认line-height引起的，该默认值由浏览器设置。通过将其设置为0，每个div将相互堆叠而无需额外的空格。由于div设置为inline-block s，因此它们的行为类似于<img>等内联元素。行高将应用于行，这将影响所有内联元素，在这种情况下是块。

#board{
    line-height: 0px;
}

这将解决问题。