Qual é a diferença entre margin e padding?

Perguntado por: abarbosa . Última atualização: 17 de julho de 2023
4.9 / 5 11 votos

Qual é a diferença do padding para o margin? Assim como o padding, o margin é um tipo de espaçamento — o que pode gerar algumas dúvidas. Porém, eles são conceitos diferentes. O padding é um dos estilos de preenchimento do CSS dentro dos limites do conteúdo, enquanto o margin é um espaçamento fora.

Como vimos, a propriedade padding é utilizada para definir a distância entre o conteúdo e a borda do container, enquanto isso, a propriedade margin cria um espaçamento externo “empurrando” os elementos adjacentes.

A propriedade padding define uma a distância entre o conteúdo de um elemento e suas bordas. É um atalho que evita definir uma distância para cada lado separadamente ( padding-top , padding-right , padding-bottom , padding-left ).

Na prática, a propriedade margin é utilizada para inserir um espaçamento externo ao elemento, ao redor da borda. É importante não confundir essa propriedade com o padding, que define um espaço interno, entre o elemento HTML e a borda.

A propriedade margin do CSS define a área de margem nos quatro lados do elemento. É uma abreviação que define todas as margens individuais de uma só vez: margin-top , margin-right (en-US), margin-bottom , e margin-left (en-US).

Margin / Margem - Espaçamento fora do conteúdo. Padding / Preenchimento - Espaçamento dentro dos limites do conteúdo. Tendo em conta que o limite do espaçamento do conteúdo de um elemento é a sua borda (border box).

padding cria um espaço ao redor de um elemento. fillMaxWidth faz a função que pode ser composta preencher a largura máxima atribuída a ela pelo elemento pai.

A propriedade CSS box-sizing é utilizada para alterar a propriedade padrão da box model, usada para calcular larguras (widths) e alturas (heights) dos elementos.

A propriedade CSS margin-top de um elemento indica o espaço acima do elemento. Valores negativos são aceitos. Essa propriedade não tem efeito em elementos non-replaced inline elements, como <tt> (en-US) ou <span> .

A propriedade border radius é utilizada para arredondar os cantos de um elemento HTML com o CSS. Utilizando esta propriedade é possível arredondar todos os cantos de uma vez, o elemento todo, ou então um canto por vez.

Não, margem negativa no CSS não é uma má prática. Margem negativa é um ótimo caminho para se negar paddings em um elemento, quando algum elemento interno deve ser posicionado de tal maneira. O legal é testar em diferentes navegadores e ver o resultado final.