css - 样式在Chrome中似乎未正确应用

我正在使用LessCSS创建一个简单的Metro主题网站。我的variables.less文件中包含以下内容：

@unit: 30px;
@tileMargin: 2px;

这在我的mixins.less中：

.tile(@xDim, @yDim, @color){
    display: inline-block;
    margin: @tileMargin;
    width: @xDim * @unit + 2 * (@xDim - 1) * @tileMargin;
    height: @yDim * @unit + 2 * (@yDim - 1) * @tileMargin;
    .gradient-bottom-right(@color);
}

.tile-container(@width, @height){
    margin: 0;
    padding: 0;
    height: @height * @unit + 2 * (@height - 1) * @tileMargin + 2 * @tileMargin;
    width: @width * @unit + 2 * (@width - 1) * @tileMargin + 2 * @tileMargin;
}

即使元素有边距，也要保证单位正方形的倍数保持适当的大小。但是，当我实际使用两个5x5的图块和10x5的图块进行测试时，我的图块之间出现了奇怪的间距。

错误示例（为清楚起见，我在容器上添加了边框）：



如果删除inline-block语句，则图块之间将具有正确的间距，但不再与父div保持正确的关系（脱离父级），并且自然不再希望彼此相邻。如何删除这个烦人的间距？我想不惜一切代价避免浮动。

编辑：刚刚确认在Firefox中会发生同样的问题。

最佳答案

inline-block将尊重您在DOM中拥有的任何文本节点（div之间有空格）。尝试将元素彼此紧紧地留有空格。