Qual a diferença de usar Padding e Margin em uma view do Android?
Quando devo saber qual utilizar?
A diferença principal se dá ao fato de que:
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.
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.
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>