Quando e por que a margem automática não funciona no CSS
Neste post, explicaremos quando e por que a margem automática não funciona no CSS.
Qual é a propriedade de margem?
CSS “margem”A propriedade é usada para criar espaço vago ao redor do elemento, que pode ser da esquerda, direita, superior e inferior. O espaço definido sempre ocorre fora do elemento HTML selecionado.
Sintaxe
Margem: Comprimento | auto;O valor que "comprimento”Refere -se à margem dos elementos, que podem ser especificados em REM, PT, PX e em outras unidades. Valor "auto”Permite que o navegador ajuste a margem.
Para uma visão geral profundamente a propriedade da margem, você pode conferir este artigo dedicado.
Quando e por que a margem automática não funciona no CSS?
Cada elemento html tem um tipo de exibição por padrão, um é “bloquear”, E o outro é“em linha”. No HTML, alguns são elementos de nível de bloco, e outros são elementos embutidos por padrão. Os elementos do nível do bloco têm uma largura 100% predefinida, enquanto os elementos embutidos não têm largura ou preenchimento predefinidos.
Tipo de bloco elemento html
Aqui em nosso arquivo html, dois “ <> Bloco
Bloquear
O valor da exibição como bloco será aplicado por padrão a
elemento e consumirá a largura de 100%, como mostrado abaixo:
Agora, vamos adicionar o “margem”Propriedade com“auto”Valor para o nosso elemento de tipo de bloco
ao longo de "largura" de "50px”:
PLargura: 50px;
margem: automático;
Depois de salvar o código mencionado, observe que a largura predefinida foi substituída por 50px e a margem automática ajustou o elemento no centro:
Vamos avançar em direção a elementos HTML do tipo embutido.
Elemento HTML do tipo em linha
Como a imagem abaixo mostra que, quando declaramos algum texto dentro das tags, eles não consumiram nenhum espaço; Somente porque o valor de exibição em linha foi aplicado por padrão neste elemento:
Agora, se aplicarmos a propriedade de largura ou a margem com valor automático no elemento Span. Como resultado, nenhum efeito ocorrerá. Porque quando a exibição é aplicada, ele faz com que o elemento consuma apenas o espaço que existe dentro de suas tags.
Dica de bônus
Se a propriedade Display para um elemento estiver definida como embutida por padrão, você poderá substituí -lo especificando o bloco de valor da propriedade Display por você mesmo.
Dê uma olhada abaixo no exemplo explicado.
Exemplo
Vamos intencionalmente usar um elemento com valor em linha predefinido, como:
> Embutido
Na próxima etapa, utilize a propriedade de exibição ao longo do valor “bloquear”. Defina a largura para 50px e a margem para automaticamente, conforme explicado:
períodoexibição: bloco;
Largura: 50px;
margem: automático;
Saída
Nós elaboramos quando e por que a margem automática não funciona no CSS.
Conclusão
A margem automática não funciona com elementos que têm exibição embutida por padrão, como span. Somente os elementos com bloco de exibição predefinidos trabalham com margem automática. No entanto, você pode substituir o comportamento embutido de um elemento e fazê -lo se comportar como um elemento do tipo de bloco. Este artigo discutiu por que e quando a margem automática não funciona no CSS.