стили отображаются некорректно в chrome

Question

Я использую 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, я получаю странное расстояние между моими плитами.

Примеры ошибок (я добавил границу на контейнере для ясности):

Если удалить встроенный блок заявление, плитка будет иметь правильный интервал между друг с другом, но уже не правильная связь с родительским div (вырваться из родителя) и, естественно, больше не хотят оставаться рядом друг с другом. Как удалить этот раздражающий интервал? Я хочу избегать плавать любой ценой.

EDIT: Только что подтвердил эту же проблему в Firefox.

Answer 1

inline-block будет уважать любые текстовые узлы, которые у вас есть в DOM (у вас есть пробелы между div). Попробуйте поместить элементы рядом друг с другом без пробелов.