Remova o espaço em branco acima e abaixo do texto grande em um elemento de bloco em linha
Digamos que eu tenha um únicospan elemento definido como um bloco inline. É apenas o conteúdo é texto simples. Quando o tamanho da fonte é muito grande, você pode ver claramente como o navegador adiciona um pouco de preenchimento acima e abaixo do texto.
HTML:
<span>BIG TEXT</span>
CSS:
span {
display: inline-block;
font-size: 50px;
background-color: green;
}
Demonstração ao vivo:http://jsfiddle.net/7vNpJ/
Olhando para o modelo de caixa, está claro que o navegador está adicionando preenchimentodentro da borda do conteúdo. Eu preciso remover este "preenchimento", uma maneira é simplesmente alterar a altura da linha, como acontece com:
Isso funciona muito bem no Chrome, mas no Firefox o texto está mudando para o topo (FF17, Chrome 23, Mac OSX).
Alguma ideia de uma solução entre navegadores? Obrigado!