Differences between Padding and Margin

Asked

Viewed 1,277 times

4

What’s the difference between using Padding and Margin in an Android view?

When should I know which one to use?

android

3 answers

9


The main difference is that:

  • the padding reserve space for the element;
  • to margin just define the spacing and design the element itself or one with which you have contact.

That is, if you apply background to an element that you own padding defined, the space relating to the padding will receive color, while the same element with margin applied in place of the padding does not receive color in the area corresponding to margin.

You can find further information on this question here.

2

Works the same as in HTML/CSS.

So much margin and padding regarding the layouts Absolute and Relative.

Using the margin on an element you give to the element the spacing defined from the parent already the padding you give space to the content of the element itself.

1

I tried to explain in this example that follows: http://jsfiddle.net/v71pdnww/1/

When executing the following page as html you can see the effects and the 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>
  • 1

    This link may be a good suggestion, but your reply will not be valid if one day the link crashes. In addition, it is important for the community to have content right here on the site. It would be better to include more details in your response. A summary of the content of the link would be helpful enough! Learn more about it in this item of our Community FAQ: Answers that only contain links are good?

  • 1

    I did what was recommended.

Browser other questions tagged android

You are not signed in. Login or sign up in order to post.