36

Pelo que percebo vejo um recuo em relação a outro elemento quando definidas as propriedades left, top, right e bottom.

Existe diferença entre margin e padding no CSS?

Uma resposta com exemplos(imagens ou código) ajudaria bastante no entendimento da questão.

3
  • Padding = Interior; Margin = Exterior
    – Edilson
    Commented 14/03/2017 às 14:42
  • 3
    @NotTheRealHemingway não é a mesma coisa. A pergunta citada se refere ao margin e padding no contexto Android e aqui é no CSS. Mesmo que os conceitos iniciais são parecidos, é válido ter a pergunta redirecionada para CSS, que ai as pessoas podem explorar mais esse contexto nas respostas. Commented 14/03/2017 às 16:29
  • 1
    @NotTheRealHemingway não discordo totalmente de você, mas tem uma diferença sim, o comportamento no HTML+CSS do box-model varia em certas situações, o que é especifico e não ocorre no Android. Por isto apesar da pergunta ser simplória ainda sim pode gerar boas respostas, na verdade eu não conheço quase ninguém que entenda de box-model e por isto ocorrem tantos problemas no desenvolvimento web, já que o comportamento do margin e padding variam de situação para situação em CSS. ;)
    – Syzoth
    Commented 14/03/2017 às 17:07

7 Respostas 7

33

A grosso modo a grande diferença é:

Margin / Margem - Espaçamento fora do conteúdo.

Padding / Preenchimento - Espaçamento dentro dos limites do conteúdo.

Os estilos dos elementos HTML estão estruturados dentro de uma caixa chamada de "The Box Model". Dentro dessa mesma caixa existe a hierarquia:

Margin Box
Border Box
Padding Box
Element Box ( O elemento em si, div, span, entre outros )

Tendo em conta que o limite do espaçamento do conteúdo de um elemento é a sua borda (border box). Portanto, a grande diferença neste caso será que a margem é aplicada já fora do elemento e criará espaçamento entre os restantes elementos, porém o padding irá criar espaçamento dentro do próprio conteúdo do elemento, não afetando o espaçamento dos outros elementos.

Model Box

0
21

Basicamente padding é o espaço entre o conteúdo e a borda, enquanto margin é o espaço fora da borda, segue uma ilustração encontrada no google.

inserir a descrição da imagem aqui

De acordo com o w3schools

Padding:
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.

Margin:
As propriedades de margem CSS são usadas para gerar espaço em torno de elementos. As propriedades de margem definem o tamanho do espaço em branco fora da borda.

Fonte:w3 padding,w3 margin

0
11

Algumas diferenças interessantes, além das citadas nas outras respostas:

  • margin pode ter o valor auto. padding não pode usar auto como valor.
  • margin:auto pode ser útil para centralizar um elemento dentro de outro.
  • margin pode ter valores negativos, enquanto usar valores negativos no padding não causa efeito.
  • padding pode receber a cor de fundo do elemento. margin não recebe a cor do elemento.

Exemplos:

.container {
  display:block;
  width:500px;
  background: #ffcccc
}

.box {
  background-color:#e6e6e6;
  text-align:center;
}

.box0 {
  margin:auto;
  width:100px;
  height:100px;
}

.box1 {
  margin:-10px;
  width:100px;
  height:100px;
}
.box2,.box6 {;
  margin:10px;
  width:100px;
  height:100px;
}
.box3 {
  padding:-10px;
  width:200px;
  height:100px;
}
.box4 {
  padding:10px;
  width:200px;
  height:100px;
}
.box5 {
  padding:10px;
  width:100px;
  height:100px;
}
<h3>Diferenças entre padding e margin</h3>

<p>Margin pode ter valor 'auto', que pode ser útil para centralizar elementos:</p>
<div class="container">
  <div class="box box0">
    margin:auto
  </div>
</div>
<p>Margin pode ter valores negativos.</p>
<div class="container">
  <div class="box box1">
    margin:-10px
  </div><br>
  <div class="box box2">
    margin:10px
  </div>
</div>
<p>Padding não sofre alterações com valores negativos.</p>
<div class="container">
  <div class="box box3">
    padding:-10px
  </div><br>
  <div class="box box4">
    padding:10px
  </div>
</div>
<p>Padding recebe cor do background do elemento, margin não recebe.</p>
<div class="container">
  <div class="box box5">
    padding:10px
  </div><br>
  <div class="box box6">
    margin:10px
  </div>
</div>

0
8

A margin é uma distância definida entre o seu objeto alvo e os outros objetos ao seu redor. Já o padding é um espaço definido dentro do seu objeto.

#container {
  background: black;
  height: 600px;
  width: 800px;
}

.clear {
  clear: both;
}

.margin {
  border: 3px solid white;
  background: red;
  margin: 10px;
  display: block;
  float: left;
}

.padding {
  border: 3px solid white;
  background: green;
  padding: 10px;
  display: block;
  float: left;
}
<div id="container">
  <div class="margin">MARGIN</div>
  <div class="margin">MARGIN</div>
  <div class="clear"></div>
  <div class="padding">PADDING</div>
  <div class="padding">PADDING</div><br/>
</div>

0
3

Além da diferença mais comum apresentada de que padding é o espaço entre a e o conteúdo e já a margin é o espaço fora da borda, existem duas outras duas diferenças importantes.

1) O padding é contado como uma área clicável e já a margin não;

2) Se você tem dois elementos de padding 1px e colocar um em cima do outro, o espaço entre eles vai ser de 2px. Já se você trocar por margin, o espaço entre eles vai ser de 1px. A não ser que você use a propriedade box-sizing: border-box. Utilizando ela, mesmo utilizando margin, o espaço entre elas vai ser de 2px

0

Complementando as respostas já oferecidas aqui com um pouco de código e imagem, é possível colocar backgroud em elementos, assim acredito que ficará mais visível a The box Model.

<div>
   <label style="background: lightgreen; padding: 50px"> label 1 </label>
</div>
<br><br><br>
<div>
   <label style="background: gold; margin: 50px"> label 2 </label>
</div>
<br><br><br>
<div>
   <label style="background: yellow; margin: 10px; padding: 10px"> label 3 </label>
</div>
<br><br><br>
<div>
   <label style="background: gray; margin: 10px; padding: 10px"> label 4 </label>
   <input type="text" style="background: lightblue; margin: 15px ">
</div>
<br><br><br>
<div>
   <label style="background: gray; margin: 10px; padding: 10px"> label 5 </label>
   <input type="text" style="background: lightblue; padding: 15px ">
</div>
<br><br><br>
<div>
   <label style="background: gray; margin: 10px; padding: 10px"> label 6 </label>
   <input type="text" style="background: lightblue; padding: 15px; margin:15px ">
</div>

Reprodução desse código em html:

inserir a descrição da imagem aqui

1
  • user2913044 bem vindo ao Stack Overflow em português. Recomendo a leitura no tour para entender um pouco mais sobre o funcionando do site.
    – Marconi
    Commented 31/10/2017 às 16:42
-2

padding e margin

1 - Content (Conteúdo) - A parte mais interna da caixa. O conteúdo pode ser uma imagem, texto, cabeçalho ou qualquer outra coisa.

2 - Padding (Preenchimento) - O espaço interno entre o conteúdo e a borda da sua caixa.

3 . Border (Borda) - O perímetro da caixa. As bordas podem ser invisíveis ou podem ser uma linha colorida grossa como a verde na foto acima.

4 - Margin (Margem) - O espaço externo (ou falta de espaço) ao redor da caixa.


imagem comparando padding e margin

O preenchimento pode ser definido como zero pixels e acima. Ele pode alterar o tamanho de seu próprio elemento e afetar o quanto de uma cor de preenchimento ou imagem de plano de fundo é visível dentro de uma caixa.

As margens, por outro lado, são essencialmente barreiras invisíveis em torno de uma caixa. Eles definem como um elemento interage com elementos adjacentes ou a borda de uma tela. As margens podem ser definidas como zero e acima, como preenchimento. Mas, ao contrário do preenchimento, as margens também podem ser definidas como automáticas e podem até ter valores negativos.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .