Margin Top e Inline Elements

Em CSS, a propriedade margin é usada para definir o espaçamento fora das bordas de um elemento. No entanto, surge um problema comum ao usar a margem superior em elementos embutidos, especialmente no Firefox.

O problema:

Por que a margem superior parece ser ignorada para elementos embutidos no Firefox?

A resposta:

Este comportamento não é exclusivo do Firefox, mas é definido no CSS 2.1 Especificação:

Especificação CSS 2.1 sobre propriedades de margem:

"As margens verticais não terão nenhum efeito em elementos embutidos não substituídos."

Explicação:

Elementos embutidos, como texto, tags e tags , não têm uma altura definida e largura e normalmente são renderizados como uma única linha de conteúdo. Margin top, uma propriedade de margem vertical, tenta criar espaço acima do elemento embutido. No entanto, como o elemento inline não tem altura para acomodar a margem, ele é ignorado.

Conclusão:

De acordo com a especificação CSS, margin top não é aplicável a elementos embutidos. Para adicionar espaço vertical acima dos elementos embutidos, considere usar outras opções, como line-height ou padding-top.