Espaços em branco misteriosos entre divs “inline-block” [duplicados]

Question

Aug 16, 2012, 09:02 AM

html css

Espaços em branco misteriosos entre divs “inline-block” [duplicados]

Esta questão já tem uma resposta aqui:

Como faço para remover o espaço entre os elementos de bloco inline? 37 respostas

Eu tenho um layout como este:Ligação violino

Entre .td's existe algum espaço em branco, mesmo se margem e preenchimento estiverem definidos como 0.

Por que isso está acontecendo e como consertar isso? Margem esquerda negativa, talvez? Ou alguma melhor solução?

<style>
.tr {
    height: 20px;
    border: 1px solid black;
    overflow: hidden;
    white-space: nowrap;
    word-spacing: 0;
}
.td {
    display: inline-block;
    height: 20px;
    margin: 0;
    padding: 0;
}
</style>
<div class="tr" style="width: 150px;">
    <div class="td" style="width: 50px; background-color: #CCC;"></div>
    <div class="td" style="width: 50px; background-color: #AAA;"></div>
    <div class="td" style="width: 50px; background-color: #666;"></div>
</div>