Introduza o termo a pesquisar e clique Enter.

Os misteriosos 3px em css

Ago 10 14

Escrito por Luis Nabais @ 14/08/10 23:08 | Sem Comentários »

Eu tenho andado a trabalhar em correcções e melhorias do código HTML/CSS do meu TV Wall já há uns tempos para me permitir fazer coisas ainda mais awesome (como drag & drop por exemplo) mas noutro dia deparei-me com um comportamento curioso da renderização de css que me demorou algum tempo até compreender o seu porquê (e na verdade ainda só tenho uma teoria não comprovada).

O problema em questão é o seguinte. Notem a imagem seguinte:

Isto é a típica composição de uma “parede” no TV Wall. Cada um dos rectângulos na imagem é uma célula contida em caixas maiores marcadas a castanho e possuindo cada uma destas ultimas display: inline-block;. Esta organização é uma necessidade por forma a permitir não só que os tamanhos das células sejam variáveis como também para as organizar nas diversas formas pretendidas e ainda para permitir que a parede cresça consistentemente em vez de crescer até ao limite da largura antes de passar para a linha de baixo.

O problema coloca-se com a pequena linha a branco que podem ver na imagem. Cada uma das caixas a castanho é suposto possuir 40em de largura e não possuir qualquer margin ou padding (por questões de consistência que auxiliam nas operações que planeio fazer em javascript) no entanto na realidade todas as caixas possuíam uma “margem” invisível de 3px à sua direita.

Na realidade isto não é nenhuma margin ou padding mas sim uma propriedade chamada de letter-spacing que por defeito no Firefox e no Chrome possui o valor de, lá está, 3px! Porém não consegui corrigir o problema alterando esta propriedade no antecessor das minhas caixas, simplesmente ficava tudo na mesma. A solução passa por algo infinitamente mais simples: colocar cada uma das caixas com float:left; display: block; e presto, os 3px desaparecem e a previsibilidade regressa.

O facto do letter-spacing ser a causa desta situação é apenas uma conclusão a que cheguei visto estar a usar inline-block em vez de um simples block + float como devia ter feito desde o inicio efectivamente complicando a minha situação. Fica no entanto o aviso para outros que possam estar a encontrar o mesmo problema e já agora se eu me tiver enganado na minha conclusão façam favor de me avisar.

pub: