Por que, quando centralizo uma imagem em uma div com altura de linha, uma lacuna de 3px aparece no topo?

Question

Dê uma olhada em esta página. As imagens à direita devem ser centralizadas dentro de suas divs. Mas se você olhar de perto, há uma pequena borda de cerca de 3 pixels no topo. E se você desativar o overflow: hidden (Através do Firebug ou do IE8 equivalente), ele destaca o fundo.

O HTML é o seguinte:

<div class="small">
    <img src="/images/photos/Bedroom.jpg" alt="Bedroom" />
</div>
<div class="small">
    <img src="/images/photos/View.jpg" alt="View" />
</div>

E o CSS, isto:

div.small
{
    width:100px;
    height:100px;
    line-height:100px;
    text-align:center;
    overflow:hidden;
    margin:5px;
    background-color: #C0C0C0;
    float:left;
}
div.small img
{
    vertical-align: middle;
    max-width:100px;
    max-height:100px;
    display: inline;
}

O que está causando essa lacuna misteriosa? Eu verifiquei as margens e o preenchimento, e eles não parecem ser o problema.

Answer 1

NB: Não tenho certeza de que essa explicação esteja correta, mas parece razoável para mim.

Primeiro, vamos ver o que as especificações têm a dizer liderando e meio líder:

Como o valor de 'altura da linha' pode ser diferente da altura da área de conteúdo, pode haver espaço acima e abaixo dos glifos renderizados. A diferença entre a altura do conteúdo e o valor usado de 'altura da linha' é chamado de liderança. Metade da liderança é chamada de meia líder.

Os agentes de usuários centralizam os glifos verticalmente em uma caixa em linha, adicionando meia líder na parte superior e inferior. Por exemplo, se um pedaço de texto for '12px' de altura e o valor da 'altura da linha' é '14px', 2pxs de espaço extra devem ser adicionados: 1px acima e 1px abaixo das letras. (Isso também se aplica a caixas vazias, como se a caixa vazia contivesse uma letra infinitamente estreita.)

Até agora tudo bem. Então, qualquer caixa de linha dentro de um div.small que têm uma altura menor que o div.small's line-height será verticalmente centrado com o div.small. Agora vamos ver a vertical-align propriedade, especificamente o middle valor:

Alinhe o ponto médio vertical da caixa com a linha de base da caixa pai mais metade da altura x do pai.

Observe que este não é necessariamente o centro da caixa de linha! A posição exata mudará com sua escolha de face e tamanho da fonte. Você pode verificar isso ampliando o texto maior e menor: o tamanho da lacuna muda.

Como você encontrou, configurar font-size: 0 Remove completamente a lacuna. Como a fonte agora não tem altura, a caixa de linha recebe uma vantagem e meio líder de 50px, com a linha de base centrada na vertical. Para renderizar o vertical-align: middle Imagem, o navegador define seu ponto médio nessa linha de base, mais a altura x da fonte, que agora é zero. Isso fornece uma imagem verticalmente centrada.

Answer 2

Acontece que configurar font-size:0; na divina o problema. No entanto, ainda não explica a lacuna. Alguém sabe o que causas a lacuna?

Answer 3

Não posso explicar inteiramente o que está acontecendo, mas depois de lidar com o mesmo problema, parece que tinha algo a ver com a maneira como eu estava declarando a propriedade da fonte no CSS, por exemplo,

Fonte: 11px/1.35em Verdana, Arial, Helvetica, Sans-Serif;

= ruim para tabelas aparentemente. -removi essa declaração e, em vez disso, usei o tamanho da fonte: 11px, altura da linha: px, família de fontes, etc., e ela corrigiu a lacuna!