Estranha margem invisível abaixo das imagens

Nesta edição, o autor encontra uma margem invisível abaixo das imagens em sua página da web, apesar da ausência de essa margem no código. Este é um problema comum causado pela natureza das imagens como elementos embutidos.

De acordo com a resposta, o comportamento embutido padrão das imagens cria espaço entre a parte inferior da imagem, que se alinha com a linha de base do texto, e a parte inferior do a linha de texto. Para resolver isso, a solução é converter a imagem em um elemento de bloco.

Uma solução simples é usar display: block; para conseguir isso. Outro método é flutuar a imagem com float: left; ou float: right;, que também o transforma em um elemento de bloco.

Ajustar propriedades como alinhamento vertical, tamanho da fonte e altura da linha também pode influenciar o espaçamento, mas é menos confiável e ainda suscetível ao efeito em diferentes contextos.

Perguntas relacionadas fornecidas para mais informações incluem o seguinte:

• Espaçamento indesejado abaixo das imagens em XHTML 1.0 Estrito
• Por que minhas imagens têm espaçamento extra?
• Problema de espaçamento de imagem do IE