0

我正在使用 LessCSS 创建一个简单的地铁主题网站。我的 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 瓷砖进行测试时，我的瓷砖之间的间距很奇怪。

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

这些框之间的距离远大于 2 个像素

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

编辑：刚刚确认在 Firefox 中也出现了同样的问题。

4

1 回答 1

0

inline-block将尊重您在 DOM 中的任何文本节点（您在 div 之间有空格）。尝试将元素彼此相邻放置，没有空格。

于 2013-09-23T01:18:43.867 回答