Diferença entre margem e preenchimento?

Qual é exatamente a diferença entre margem e preenchimento no CSS? Realmente não parece ter muito propósito. Você poderia me dar um exemplo de onde estão as diferenças (e por que é importante saber a diferença)?

paddingé o espaço entre o conteúdo e o border, enquanto que marginé o espaço fora da borda. Aqui está uma imagem que encontrei em uma rápida pesquisa no Google, que ilustra essa ideia.

Uma coisa importante que está faltando nas respostas aqui:

As margens superior / inferior são dobráveis.

Portanto, se você tiver uma margem de 20 px na parte inferior de um elemento e uma margem de 30 px na parte superior do próximo elemento, a margem entre os dois elementos será 30 px em vez de 50 px. Isso não se aplica à margem esquerda / direita ou ao preenchimento.

A margem é aplicada ao elemento exterior de você, afetando a distância do elemento em relação a outros elementos.

O preenchimento é aplicado à parte interna do seu elemento, afetando a distância que o conteúdo do elemento está da borda.

Além disso, o uso da margem não afetará as dimensões do elemento, enquanto o preenchimento aumentará as dimensões dos elementos (definir altura + preenchimento). Por exemplo, se você tiver uma div de 100x100px com um preenchimento de 5 px, sua div será realmente 105x105px

Lembre-se destes 3 pontos:

• A margem é o espaço extra ao redor do controle.
• O preenchimento é espaço extra dentro do controle.
• O preenchimento de um controle externo é a margem de um controle interno .

Imagem de demonstração: (onde a caixa vermelha é o controle do desejo)

A definição mais simples é; padding é um espaço fornecido dentro da borda do elemento container e a margem é fornecida fora. Para um elemento que não é um contêiner, o preenchimento pode não fazer muito sentido, mas a margem defenitly ajudará a organizá-lo.

Preenchimento é espaço dentro da borda, enquanto Margem é espaço fora da borda.

Preenchimento

Padding é uma propriedade CSS que define o espaço entre o conteúdo de um elemento e sua borda (se houver uma borda). Se um elemento tiver uma borda ao redor, o preenchimento dará espaço a partir dessa borda para o conteúdo do elemento que aparece nessa borda. Se um elemento não tiver uma borda ao redor, a adição de preenchimento não terá efeito algum sobre esse elemento, porque não há borda para a qual dar espaço.

Margem

Margin é uma propriedade CSS que define o espaço externo de um elemento para seu próximo elemento externo.

Margem afeta elementos que possuem ou não bordas. Se um elemento tiver uma borda, a margem definirá o espaço dessa borda para o próximo elemento externo. Se um elemento não tiver uma borda, a margem definirá o espaço do conteúdo do elemento para o próximo elemento externo.

Diferença entre preenchimento e margem

Portanto, a diferença entre margem e preenchimento é que, enquanto o preenchimento lida com o espaço interno, a margem lida com o espaço externo para o próximo elemento externo.

Uma das principais diferenças entre margem e preenchimento não é mencionada em nenhuma das respostas: clicabilidade e detecção de pairar

Aumentar o preenchimento aumenta o tamanho efetivo do elemento. Às vezes, tenho um ícone pequeno que não quero aumentar visivelmente, mas o usuário ainda precisa interagir com esse ícone. Aumentei o preenchimento do ícone para obter uma área maior para cliques e pairar. Aumentar a margem do ícone não terá o mesmo efeito.

Uma resposta para outra pergunta sobre esse tópico dá um exemplo.

margin = espaço ao redor (fora) do elemento da borda para fora.

padding = espaço ao redor (dentro) do elemento do texto à borda.

veja aqui: http://jsfiddle.net/robx/GaMpq/

É bom saber sobre as diferenças entre margine padding. Como eu sei:

• Margem é o espaço externo de um elemento, enquanto estofamento é o espaço interno de um elemento. Em outras palavras, margin é o espaço fora da borda de um elemento, enquanto padding é o espaço dentro de sua borda.
• Você pode definir o autovalor para margem. No entanto, não é permitido o preenchimento. Veja isso .
  Nota: Use margin: autopara centralizar um elemento de bloco dentro de seu pai horizontalmente. Além disso, é possível centralizar um elemento dentro de um flexbox vertical ou horizontalmente ou ambos, definindo a margem como automático. Veja isso .
• A margem pode ser qualquer número flutuante, mas o preenchimento não deve ser negativo.
• Quando você estiliza um elemento, o preenchimento também será estilizado; mas não margem. Margem obtém o estilo do elemento pai. Por exemplo, quando você define a background-colorpropriedade para preto, seu espaço interno (ou seja, preenchimento) será preto, mas não seu espaço externo (ou seja, margem).

Margem é espaço fora da caixa; preenchimento é espaço dentro da caixa. É difícil ver a diferença com um preenchimento branco, mas com um preenchimento colorido você pode vê-lo bem.

Margem e preenchimento são os dois tipos de preenchimento realmente ... Um (margem) sai da borda dos elementos para distanciar outros elementos e o outro (preenchimento) sai do conteúdo dos elementos para distanciar o conteúdo da borda dos elementos.

O preenchimento permite que o desenvolvedor mantenha espaço entre o texto e seu elemento envolvente. Margem é o espaço que o elemento mantém com outro elemento do DOM principal.

Consultar exemplo:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UT-8">
    <title>Pseudo Elements</title>
    <style type="text/css">
        body{font-family:Arial; font-size:16px; background-color:#f8e6ae; color:#888;}
        .page
        {
            background-color: #fff;
            padding: 10px 30px 50px 50px;
            margin:30px 100px 30px 300px;
        }
    </style>
</head>
<body>
    <div class="page">
        Notice the distance between the top and this text. Then compare it with the distance between the bottom border and the this text. 
    </div>
</body>

Margem é uma propriedade em CSS usada para criar espaços ao redor dos elementos, fora da borda. O programador pode definir a margem para cima, direita, baixo e esquerda. Em outras palavras, ele pode definir esses valores usando margem superior, margem direita, margem inferior e margem esquerda.

Os valores da margem podem ser dos seguintes tipos.

Primeiro, auto permite que o navegador calcule a margem. Além disso, o comprimento denota uma margem em px, pt ou cm, enquanto% ajuda a descrever uma margem como uma porcentagem relativa à largura do elemento que o contém. Finalmente, herdar denota que a margem deve herdar do elemento pai.

Preenchimento é uma propriedade em CSS que ajuda a criar espaço em torno de um elemento dentro da borda. O programador pode definir o preenchimento para as partes superior, direita, inferior e esquerda. Em outras palavras, ele pode definir esses valores usando padding-top, padding-right, padding-bottom e padding-left.

Os valores de preenchimento podem ser dos seguintes tipos.

O comprimento descreve o preenchimento em px, pt ou cm, enquanto% indica o preenchimento como uma porcentagem relativa à largura do elemento que o contém. Por fim, herdar descreve que o preenchimento deve ser herdado do elemento pai.

 div.special {
          width:200px; 
          border-style: solid; 
          border-width:thin; 
          border-color:#000;
          margin:30px 20px 10px 25px;
}     
div.special2 {
          width:200px;
          border-style: solid;
          border-width:thin;
          border-color:#000;
          padding:30px 20px 10px 25px;
}        

<div class="special">
             Hello its margin test 
</div>
<div class="special2">
            Hello its padding test
</div>

Diferença entre margem e preenchimento

Margin é uma propriedade CSS usada para criar espaço ao redor do elemento fora da borda definida, enquanto o preenchimento é uma propriedade CSS usada para criar espaço ao redor do elemento, dentro da borda definida. Assim, isso explica a principal diferença entre margem e preenchimento.

Valores Além disso, os valores da margem podem ser automáticos, comprimento,% ou herança, enquanto os valores de preenchimento podem ser comprimento,% ou tipo de herança. Portanto, essa é outra diferença entre margem e preenchimento.

Em resumo, margem e preenchimento são duas propriedades no CSS que permitem estilizar as páginas da web. Não é possível atribuir valores negativos para essas propriedades. A principal diferença entre margem e preenchimento é que a margem ajuda a criar espaço ao redor do elemento fora da borda, enquanto o preenchimento ajuda a criar espaço ao redor do elemento dentro da borda.

Tente colocar uma cor de fundo em uma div de bloco com largura e altura. Você verá que o preenchimento aumenta o tamanho do elemento, enquanto a margem apenas o move dentro do fluxo do documento.

Margem é especificamente para mudar o elemento.

Preenchimento é o espaço entre os componentes mais próximos na página da web e a margem é o espaço da margem da página da web.

Uma coisa que acabei de notar, mas nenhuma das respostas acima mencionadas. Se eu tiver um elemento DOM criado dinamicamente e inicializado com conteúdo html interno vazio, é uma boa prática usar margem em vez de preenchimento, se você não quiser que esse elemento vazio ocupe espaço, exceto se o conteúdo for criado.

Há uma diferença importante:

Margem - fica do lado de fora do elemento, ou seja, será aplicada a mudança de espaço em branco "depois" do início do elemento. Preenchimento - é por dentro, o outro aplicará o espaço em branco "antes" do elemento começar.

A margem é aplicada ao elemento externo, afetando a distância do elemento em relação a outros elementos.

O preenchimento é aplicado à parte interna do seu elemento, afetando a distância que o conteúdo do elemento está da borda.

Além disso, o uso da margem não afetará as dimensões do elemento, enquanto o preenchimento aumentará as dimensões dos elementos (definir altura + preenchimento). Por exemplo, se você tiver uma div de 100x100px com um preenchimento de 5 px, sua div será realmente 105x105px

Basicamente, a diferença entre preenchimento e margem ocorre em termos de segundo plano. O preenchimento decidirá o espaço entre o conteúdo, enquanto a margem decidirá a borda externa dos elementos!

Preenchimento é o espaço entre o conteúdo e a borda. Onde Margem é o espaço entre a borda e o outro elemento.