4

Qual a diferença de usar Padding e Margin em uma view do Android?

Quando devo saber qual utilizar?

3 Respostas 3

9

A diferença principal se dá ao fato de que:

  • o padding reserva espaço ao elemento;
  • a margin apenas define o espaçamento e projeta o próprio elemento ou algum com o qual tenha contato.

Ou seja, se você aplicar background a um elemento que possua padding definido, o espaço relativo ao padding receberá cor, enquanto o mesmo elemento com margin aplicado no lugar do padding não recebe cor na área correspondente à margin.

Você pode encontrar maiores informações nessa pergunta aqui.

2

Funciona da mesma maneira que em HTML/CSS.

Tanto margin e padding quanto os layouts Absolute e Relative.

Usando o margin em um elemento você da ao elemento o espaçamento definido a partir do pai já o padding você da o espaço ao conteúdo do elemento em si.

1

Eu tentei explicar neste exemplo que segue: http://jsfiddle.net/v71pdnww/1/

Ao executar a seguinte página como html você poderá ver os efeitos e a explicação:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento sem título</title>
<style>
div {
    width: 100px;
    height: 100px;
    border: 1px solid blue
}
div > div {
    width: 100px;
    height: 100px;
    overflow: hidden;
    border: 1px solid red
}
.divpadding {
    padding: 10px
}
.divmargin {
    margin: 100px
}
</style>
</head>

<body>
<p>Normal com duas divs e um conteúdo de tamanho 100px e conteúdo</p>
<div>
  <div>Lorem Ipsum é simplesmente uma simulação de texto da indústria .. </div>
</div>
<br>
<p>A div azul vai dar um padding de 10px da vermelha ou seja, ela expandiu o seu espaço interno de 10px de cada lado para continuar guardando a div vermelha dentro dela. Ao dar um padding, ela cria uma margem interna no seu elemento ganhando assim uma nova dimensão caso essa margem não seja descontada no width e height dela mesma. Resumindo: uma margem interna que tem efeito direto nos elementos internos e não nos elementos externos caso seja mantido o width e height inicial.</p>
<div class="divpadding">
  <div>Lorem Ipsum é simplesmente uma simulação de texto da indústria ... </div>
</div>
<p>Ao dar um margin, você pode perceber que todos os espaçamentos internos foram mantidos mas que a div azul se afastou das bordas do conteúdo externo, ou seja, não foi alterado a estrutura interno como no precedente, mas foi alterado o espçamento externo em relação ao elementos externos.</p>
<div class="divmargin">
  <div>Lorem Ipsum é simplesmente uma simulação de texto da indústria .. </div>
</div>
<p>Conclusão: enquanto margin posiciona um elemento em relação a elementos externos, padding posiciona o elemento em relação aos elementos internos daquele elemento.</p>
</body>
</html>
2
  • 1
    Esse link pode ser uma boa sugestão, mas sua resposta não terá validade se um dia o link deixar de funcionar. Além disso, é importante para a comunidade ter conteúdo aqui no site mesmo. Seria melhor incluir mais detalhes na sua resposta. Um resumo do conteúdo do link já ajudaria bastante! Saiba mais sobre o assunto neste item do nosso FAQ da Comunidade: Respostas que apenas contêm links são boas?
    – mgibsonbr
    21/08/2014 às 23:10
  • 1
    Fiz o que foi recomendado. 21/08/2014 às 23:21

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 .