Quando usar margem versus preenchimento em CSS [fechado]

Ao escrever CSS, existe uma regra ou diretriz específica que deve ser usada para decidir quando usar margine quando usar padding?

TL; DR: Por padrão, uso margem em todos os lugares, exceto quando tenho uma borda ou plano de fundo e quero aumentar o espaço dentro dessa caixa visível.

Para mim, a maior diferença entre preenchimento e margem é que as margens verticais colapsam automaticamente e o preenchimento não.

Considere dois elementos um acima do outro, cada um com preenchimento de 1em. Esse preenchimento é considerado parte do elemento e é sempre preservado.

Portanto, você terminará com o conteúdo do primeiro elemento, seguido pelo preenchimento do primeiro elemento, seguido pelo preenchimento do segundo elemento, seguido pelo conteúdo do segundo elemento.

Assim, o conteúdo dos dois elementos acabará sendo 2emseparado.

Agora substitua esse preenchimento pela margem 1em. As margens são consideradas fora do elemento e as margens dos itens adjacentes se sobrepõem.

Portanto, neste exemplo, você terminará com o conteúdo do primeiro elemento seguido pela 1emmargem combinada seguida pelo conteúdo do segundo elemento. Portanto, o conteúdo dos dois elementos é apenas 1emseparado.

Isso pode ser realmente útil quando você sabe que deseja dizer o 1emespaçamento ao redor de um elemento, independentemente de qual elemento ele está próximo.

As outras duas grandes diferenças são que o preenchimento está incluído na região do clique e na cor / imagem do plano de fundo, mas não na margem.

div.box > div { height: 50px; width: 50px; border: 1px solid black; text-align: center; }
div.padding > div { padding-top: 20px; }
div.margin > div { margin-top: 20px; }

<h3>Default</h3>
<div class="box">
  <div>A</div>
  <div>B</div>
  <div>C</div>
</div>

<h3>padding-top: 20px</h3>
<div class="box padding">
  <div>A</div>
  <div>B</div>
  <div>C</div>
</div>

<h3>margin-top: 20px; </h3>
<div class="box margin">
  <div>A</div>
  <div>B</div>
  <div>C</div>
</div>

A margem fica do lado de fora dos elementos do bloco, enquanto o preenchimento está do lado de dentro.

• Use a margem para separar o bloco das coisas fora dele
• Use estofamento para afastar o conteúdo das bordas do bloco.

O melhor que eu já vi explicando isso com exemplos, diagramas e até uma visão do tipo 'tente você mesmo' está aqui .

Acho que o diagrama abaixo fornece uma compreensão visual instantânea da diferença.

Uma coisa a ter em mente é que os navegadores compatíveis com os padrões (as peculiaridades do IE são uma exceção ) processam apenas a parte do conteúdo na largura especificada, portanto, acompanhe isso nos cálculos de layout. Observe também que a caixa de borda está tendo um retorno com o Bootstrap 3 suportando-a.

Há mais explicações técnicas para sua pergunta, mas se você estiver procurando uma maneira de pensar em margem e preenchimento que o ajudará a escolher quando e como usá-los, isso pode ajudar.

Compare os elementos do bloco com as imagens penduradas na parede:

• A janela do navegador é exatamente como a parede.
• O conteúdo é como uma fotografia.
• A margem é exatamente como o espaço da parede entre as fotos emolduradas.
• O preenchimento é exatamente como o tapete em torno de uma foto.
• A borda é exatamente como a borda de um quadro.

Ao decidir entre margem e preenchimento, é uma boa regra usar margem quando você está espaçando um elemento em relação a outras coisas na parede e preenchimento quando você está ajustando a aparência do próprio elemento. A margem não altera o tamanho do elemento, mas o preenchimento geralmente aumenta o elemento ¹ .

¹ Este modelo de caixa padrão pode ser alterado com o box-sizingatributo .

MARGIN vs PADDING :

1. Margem é usada em um elemento para criar distância entre esse elemento e outros elementos da página. Onde o preenchimento é usado para criar distância entre o conteúdo e a borda de um elemento.

2. A margem não faz parte de um elemento em que o preenchimento faz parte do elemento.

Consulte a imagem abaixo extraída de Margin Vs Padding - CSS Properties

De https://www.w3schools.com/css/css_boxmodel.asp

Explicação das diferentes partes:

• Conteúdo - o conteúdo da caixa, onde o texto e as imagens aparecem

• Preenchimento - Limpa uma área ao redor do conteúdo. O estofamento é transparente

• Borda - uma borda que circunda o preenchimento e o conteúdo

• Margem - Limpa uma área fora da borda. A margem é transparente

Exemplo ao vivo (altere os valores): https://www.w3schools.com/css/tryit.asp?filename=trycss_boxmodel

Aqui está um HTML que demonstra como paddinge marginafeta a clicabilidade e o preenchimento em segundo plano. Um objeto recebe cliques no preenchimento, mas os cliques na área da margem dos objetos vão para o pai.

$(".outer").click(function(e) {
  console.log("outer");
  e.stopPropagation();
});

$(".inner").click(function(e) {
  console.log("inner");
  e.stopPropagation();
});

.outer {
  padding: 10px;
  background: red;
}

.inner {
  margin: 10px;
  padding: 10px;
  background: blue;
  border: solid white 1px;
}

<script src="http://code.jquery.com/jquery-latest.js"></script>

<div class="outer">
  <div class="inner" style="position:relative; height:0px; width:0px">

  </div>
</div>

O problema das margens é que você não precisa se preocupar com a largura do elemento.

Como quando você dá algo {padding: 10px;}, você terá que reduzir a largura do elemento em 20px para manter o ' ajuste ' e não perturbar outros elementos ao seu redor.

Então, geralmente começo usando almofadas para obter tudo ' packed' e depois uso as margens para pequenos ajustes.

Outra coisa a ter em atenção é que os preenchimentos são mais consistentes em diferentes navegadores e o IE não trata muito bem as margens negativas.

A margem limpa uma área ao redor de um elemento (fora da borda), mas o preenchimento limpa uma área ao redor do conteúdo (dentro da borda) de um elemento.

significa que seu elemento não conhece suas margens externas; portanto, se você estiver desenvolvendo controles dinâmicos da web, recomendo que você use padding vs margin, se puder.

note que algumas vezes você precisa usar margem.

É bom saber as diferenças entre margine padding. Aqui estão algumas diferenças:

• Margem é o espaço externo de um elemento, enquanto o preenchimento é o espaço interno de um elemento.

• Margem é o espaço fora da borda de um elemento, enquanto preenchimento é o espaço dentro da borda dele.

• A margem aceita o valor de auto:, margin: automas você não pode definir o preenchimento como automático.

• A margem pode ser definida como qualquer número, mas o preenchimento deve ser não negativo.

• Quando você estiliza um elemento, o preenchimento também será afetado (por exemplo, cor de fundo), mas não margem.

Uma coisa a observar é que quando as margens de recolhimento automático o incomodam (e você não está usando cores de plano de fundo em seus elementos), algo é apenas mais fácil de usar o preenchimento.

Margem avançada versus preenchimento explicado

É inapropriado usar paddingpara espaçar o conteúdo em um elemento; você deve utilizar margino elemento filho . Navegadores mais antigos, como o Internet Explorer, interpretaram mal o modelo da caixa, exceto quando se tratava de usar o marginque funciona perfeitamente no Internet Explorer 4 .

Existem duas exceções quando o uso padding é apropriado:

1. É aplicado a um elemento embutido que não pode conter nenhum elemento filho, como um elemento de entrada.

2. Você está compensando um bug no navegador altamente variado que um fornecedor * tosse * Mozilla * tosse * se recusa a corrigir e tem certeza (na medida em que realiza trocas regulares com os editores W3C e WHATWG) de que você deve ter uma solução funcional e esta solução não afetará o estilo de nada além do bug que você está compensando.

Quando você tem um elemento de largura de 100%, padding: 50px;efetivamente obtém width: calc(100% + 100px);. Como nãomargin é adicionado ao item, não causará problemas inesperados de layout quando você o usar, em vez de diretamente no elemento.widthmarginchild elementspadding

Portanto, se você não estiver fazendo uma dessas duas coisas, não adicione preenchimento ao elemento, mas sim ao (s) elemento (s) filho (s) direto (s) para garantir que você obtenha o comportamento esperado em todos os navegadores.

Primeiro, vamos ver quais são as diferenças e qual é a responsabilidade:

1) Margem

As propriedades da margem CSS são usadas para gerar espaço em torno dos elementos.
As propriedades da margem definem o tamanho do espaço em branco fora da borda. Com CSS, você tem controle total sobre as margens.
Existem propriedades CSS para definir a margem para cada lado de um elemento (superior, direito, inferior e esquerdo).

2) Preenchimento

As propriedades de preenchimento CSS são usadas para gerar espaço em torno do conteúdo.
O preenchimento limpa uma área ao redor do conteúdo (dentro da borda) de um elemento.
Com CSS, você tem controle total sobre o preenchimento. Existem propriedades CSS para definir o preenchimento para cada lado de um elemento (superior, direito, inferior e esquerdo).

Então, simplesmente Margens são espaço ao redor de elementos, enquanto Padding é espaço ao redor de conteúdo que faz parte do elemento.

Esta imagem do codemancers mostra como a margem e as bordas ficam mais juntas e como a caixa de borda e a caixa de conteúdo a diferenciam.

Também eles definem cada seção como abaixo:

• Conteúdo - define a área de conteúdo da caixa em que residem o conteúdo real, como texto, imagens ou talvez outros elementos.
• Preenchimento - limpa o conteúdo principal da caixa que o contém.
  
• Borda - envolve tanto o conteúdo quanto o preenchimento.
• Margem - esta área define um espaço transparente que o separa de outros elementos.

Eu sempre uso este princípio:

Este é o modelo de caixa do recurso de elemento de inspeção no Firefox. Funciona como uma cebola:

• Seu conteúdo está no meio.
• Preenchimento é o espaço entre o conteúdo e a borda da tag dentro.
• A fronteira e suas especificações
• A margem é o espaço ao redor da tag.

Margens maiores criarão mais espaço ao redor da caixa que contém seu conteúdo.

O preenchimento maior aumentará o espaço entre o conteúdo e a caixa em que ele está dentro.

Nenhum deles aumentará ou diminuirá o tamanho da caixa se estiver definida com um valor específico.

Margem

Margem é geralmente usada para criar um espaço entre o próprio elemento e seu entorno.

por exemplo, uso-o quando estou construindo uma barra de navegação para que ela fique grudada nas bordas da tela e sem espaços brancos.

Preenchimento

Eu costumo usar quando tenho um elemento dentro de uma borda, <div>ou algo semelhante, e quero diminuir seu tamanho, mas no momento quero manter a distância ou a margem entre os outros elementos ao seu redor.

Então, brevemente, é situacional; depende do que você está tentando fazer.

A margem está fora da caixa e o estofamento está dentro da caixa