Diferença entre o preenchimento e a margem de uma vista

566

Qual é a diferença entre a margem de uma vista e o preenchimento?

Ragunath Jawahar
fonte
10
O preenchimento está dentro da borda, a margem está fora. Veja o modelo W3C Box para detalhes. Este post é muito mais legível, embora :-)
Aaron Digulla
2
Isso pode ser útil Declarando layout
Sharique Abdullah
3
este é o mesmo que HTML, consulte aqui para mais stackoverflow.com/questions/2189452/...
Scott
Veja minha resposta em perguntas semelhantes stackoverflow.com/questions/21959050/…
Eugene Brusov 10/10

Respostas:

568

Para me ajudar a lembrar o significado de estofamento , penso em um casaco grande com muito estofamento de algodão grosso . Estou dentro do meu casaco, mas eu e meu casaco acolchoado estamos juntos. Nós somos uma unidade.

Mas, para lembrar a margem , penso em: " Ei, me dê uma margem! " É o espaço vazio entre eu e você. Não entre na minha zona de conforto - minha margem.

Para deixar mais claro, aqui está uma imagem de preenchimento e margem em TextView:

insira a descrição da imagem aqui

layout xml para a imagem acima

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:background="#c5e1b0"
        android:textColor="#000000"
        android:text="TextView margin only"
        android:textSize="20sp" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:background="#f6c0c0"
        android:textColor="#000000"
        android:text="TextView margin only"
        android:textSize="20sp" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#c5e1b0"
        android:padding="10dp"
        android:textColor="#000000"
        android:text="TextView padding only"
        android:textSize="20sp" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#f6c0c0"
        android:padding="10dp"
        android:textColor="#000000"
        android:text="TextView padding only"
        android:textSize="20sp" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:background="#c5e1b0"
        android:textColor="#000000"
        android:padding="10dp"
        android:text="TextView padding and margin"
        android:textSize="20sp" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:background="#f6c0c0"
        android:textColor="#000000"
        android:padding="10dp"
        android:text="TextView padding and margin"
        android:textSize="20sp" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#c5e1b0"
        android:textColor="#000000"
        android:text="TextView no padding no margin"
        android:textSize="20sp" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#f6c0c0"
        android:textColor="#000000"
        android:text="TextView no padding no margin"
        android:textSize="20sp" />

</LinearLayout>

Relacionado

Suragch
fonte
578

Preenchimento é o espaço dentro da borda, entre a borda e o conteúdo da visualização real. Observe que o preenchimento gira completamente em torno do conteúdo: há preenchimento nos lados superior, inferior, direito e esquerdo (que podem ser independentes).

Margens são os espaços fora da borda, entre a borda e os outros elementos próximos a esta visualização. Na imagem, a margem é a área cinza fora do objeto inteiro. Observe que, como o preenchimento, a margem gira completamente em torno do conteúdo: existem margens nos lados superior, inferior, direito e esquerdo.

Uma imagem diz mais de 1000 palavras (extraídas de Margin Vs Padding - CSS Properties ):

texto alternativo

Cristian
fonte
54
A resposta é para HTML / CSS, a pergunta era sobre o Android. O modelo de exibição do Android é inspirado em HTML, mas não é idêntico. Por um lado, a borda não é um objeto considerável de primeira classe lá.
Seva Alekseyev 23/06
48
NOTA: No Android, a propriedade layout_width inclui conteúdo e preenchimento. (Em HTML, a propriedade css width refere-se apenas à largura do conteúdo.) Como Seva disse, o Android não possui um conceito interno de bordas. Você pode usar um plano de fundo png de 9 correções ou um vetor xml que possa ser adicionado para adicionar uma borda no Android.
SharkAlley
12
É importante notar também que o fundo é modificado com base na margem, mas não o estofamento (em Android.)
ArtOfWarfare
No Android, o que aqui é chamado de "borda", é na verdade o 'view container'. Isso deve esclarecer um pouco as coisas que eu espero.
The Hungry Androider
75

O preenchimento está dentro de uma Vista.

A margem está fora de uma vista.

Essa diferença pode ser relevante para as propriedades de segundo plano ou tamanho.

Floern
fonte
41

O preenchimento está dentro da visualização, a margem está fora. O preenchimento está disponível para todas as visualizações. Dependendo da visualização, pode ou não haver uma diferença visual entre preenchimento e margem.

Para botões, por exemplo, a imagem de fundo característica do botão inclui o preenchimento, mas não a margem. Em outras palavras, adicionar mais preenchimento torna o botão visualmente maior, enquanto adicionar mais margem apenas aumenta o espaço entre o botão e o próximo controle.

Para TextViews, por outro lado, o efeito visual do preenchimento e da margem é idêntico.

A disponibilidade ou não da margem é determinada pelo contêiner da visualização, não pela própria visualização. Na LinearLayoutmargem é suportada, em AbsoluteLayout(considerado obsoleto agora) - não.

Seva Alekseyev
fonte
25

A imagem abaixo permitirá entender o preenchimento e a margem

insira a descrição da imagem aqui

Akshay Paliwal
fonte
8

Preenchimento significa espaço entre o widget e o quadro original do widget. Mas a margem é o espaço entre o quadro original do widget e os limites do quadro de outro widget. insira a descrição da imagem aqui.

akn
fonte
7

Preenchimento é o espaço dentro da borda entre a borda e o conteúdo real da imagem ou célula. Margens são os espaços fora da borda, entre a borda e os outros elementos próximos a esse objeto.

rajá
fonte
7

Às vezes, você pode obter o mesmo resultado jogando apenas com preenchimento OU margem. Exemplo:

Diga que a visualização X contém a visualização Y (também conhecida como: a visualização Y está dentro da visualização X).

-Vista Y com margem = 30 OU A exibição X com preenchimento = 30 obterá o mesmo resultado: a exibição Y terá um deslocamento de 30.

Akli
fonte
7

Preenchimento
preenchimento está dentro de um exemplo View.For se você dá android:paddingLeft=20dp, em seguida, os itens dentro da vista vai organizar com 20dplargura de left.You também pode usar paddingRight, paddingBottom,paddingTop que são para dar cobertura da direita, inferior e superior, respectivamente.

Margem A
margem está fora de a View. Por exemplo, se você der android:marginLeft=20dp, a vista será organizada depois 20dpda esquerda.

jinosh
fonte
3

Vamos supor que você tenha um botão em uma visualização e o tamanho da visualização seja de 200 por 200, e o tamanho do botão seja de 50 por 50, e o título do botão seja HT. Agora, a diferença entre margem e preenchimento é: você pode definir a margem do botão na visualização, por exemplo 20 da esquerda, 20 da parte superior, e o preenchimento ajustará a posição do texto no botão ou na visualização de texto etc. , o valor do preenchimento é 20 a partir da esquerda, para ajustar a posição do texto.

Steve
fonte
2

Margem refere-se ao espaço extra fora de um elemento. Preenchimento refere-se ao espaço extra dentro de um elemento. A margem é o espaço extra ao redor do controle. O preenchimento é espaço extra dentro do controle.

É difícil ver a diferença com margem e preenchimento com um preenchimento branco, mas com um preenchimento colorido você pode vê-lo bem.

Pawan Kumar Singh
fonte
2

Além de todas as respostas corretas acima, outra diferença é que o preenchimento aumenta a área clicável de uma exibição, enquanto as margens não . Isso é útil se você tiver uma imagem pequena e clicável, mas quiser fazer com que o manipulador de cliques perdoe.

Por exemplo, ver esta imagem do meu layout com um ImageView(o ícone Android) onde eu definir o paddingBottonser 100dp(a imagem é o lançador de mipmap estoque ic_launcher). Com o manipulador de cliques anexado, fui capaz de clicar fora e abaixo da imagem e ainda registrar um clique.

insira a descrição da imagem aqui

scorpiodawg
fonte
Uma dica prática e útil!
Navylover 12/06
2

Em palavras simples:

  1. Preenchimento - cria espaço dentro da borda da vista.
  2. Margem - cria espaço fora da borda da vista.
mohammed nathar
fonte
1

Em palavras simples: o
preenchimento muda o tamanho da caixa (com alguma coisa).
margem altera o espaço entre caixas diferentes


fonte