樣式似乎在鍍鉻中不正確應用

Question

我正在使用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。

Answer 1

inline-block將尊重您在DOM中的任何文本節點（您在div之間有空格）。嘗試將元素放在一起，不要有空格。