Рульщик добавляет пространство между моими divs?

Question

jsFiddle

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

 <div id='vehicles' class='wrapper'> 
     <div class='divd'>&nbsp</div> 
      {{#each this}} 
       <div id='{{group}}' title='Driver Details' class='divd {{group}}' > 
       {{trailer}} 
       </div> 
      {{/each}} 
     </div> 
    </div> 

Answer 1

inline-block Использование использует пробелы вокруг div (это не имеет ничего, чтобы с рули).

---

Просто установите родительский элемент font-size к 0, а затем установить font-size из div s непосредственно:

.wrapper { 
    font-size: 0; 
} 

.divd { 
    display: inline-block; 
    width: 50px; 
    height: 50px; 
    font-size: 14px; 
} 

Вот ваша скрипка: http://jsfiddle.net/fz2Hv/

Answer 2

Его из-за display:inline-block. Вы должны устранить пробел между HTML от дел до DIV:

</div><div id="NewDiv"> 

Вместо

</div> 
<div id="NewDiv"> 

грубый пример, но вы получите то, что я имею в виду.

Answer 3

Ваши стили просят каждого .divd быть display: inline-block. Это заставляет их вести себя относительно пробелов вокруг тега так же, как обычные встроенные элементы (например, обычный текст). Точно так же, как в простом тексте у вас есть пробелы в разметке, вы попадаете в пробелы на странице, вы можете получить это здесь. Один из возможных способов исправить это - установить font-size: 0 на родителя, который сделает это пространство равным нулю в родительском контейнере. Однако вам придется добавить обратно font-size.

http://jsfiddle.net/F6JE7/