Line-Height e Inline Elements: A Deeper Dive

Compreender o comportamento da altura da linha em elementos inline pode ser intrigante. Apesar da pesquisa minuciosa, alguns aspectos importantes permanecem obscuros. Este guia se aprofunda no assunto para responder às seguintes perguntas:

1. Inconsistência entre o tamanho da fonte e a altura medida:

Um elemento embutido com tamanho de fonte de 15px exibe uma altura de 18px nas ferramentas de desenvolvedor do navegador. Isso ocorre porque:

• Altura da caixa embutida: A propriedade line-height determina a altura da caixa embutida, que inclui todos os glifos e suas metades iniciais em cada lado. Nesse caso, a altura da caixa é 15px.
• Altura da área de conteúdo: As ferramentas do desenvolvedor informam a altura da área de conteúdo, que normalmente excede a altura da linha devido a variações nos tamanhos dos glifos dentro de uma fonte.

2. A cor de fundo não corresponde à altura da linha:

A cor de fundo do elemento embutido não se alinha com a altura da linha porque:

• Altura da caixa de linha: Além das caixas embutidas, também existem caixas de linha. A altura de uma caixa de linha é determinada pela altura da linha e inclui apenas as caixas embutidas que compartilham a mesma altura de linha e alinhamento vertical. Neste exemplo, a altura da caixa de linha também é 15px.
• Altura da área de conteúdo: A cor de fundo é aplicada à área de conteúdo, que corresponde à altura do glifo mais alto no usado fonte e tamanho. Este valor pode variar dependendo das características da fonte e não está diretamente relacionado à altura da linha.

Nota: A especificação CSS não define explicitamente o algoritmo para calcular a área de conteúdo altura, deixando isso para a interpretação dos agentes do usuário.