What's the difference between using Padding and Margin in an Android view?
When should I know which one to use?
Differences between Padding and Margin
4
asked by anonymous 22.08.2014 / 00:31
3 answers
9
The main difference lies in the fact that:
- o padding reserves space for the element;
- a margin only defines the spacing and projects the element itself or some with which it has contact.
That is, if you apply background to an element that has padding set, the padding space will be given color, while the same element with margin does not receive color in the margin area.
You can find more information on this question here .
22.08.2014 / 00:35
2
It works in the same way as in HTML / CSS.
Both margin and padding and layouts Absolute and Relative .
Using the margin on an element you give the element the spacing defined from the parent already the padding you give the space to the content of the element itself.
22.08.2014 / 00:36
1
I tried to explain in this example that follows: link
When you run the following page as html you can see the effects and explanation:
<!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>
22.08.2014 / 01:03