Diferencia entre el relleno y el margen de una vista

¿Cuál es la diferencia entre el margen y el relleno de una vista?

Para ayudarme a recordar el significado del relleno , pienso en un abrigo grande con mucho relleno de algodón grueso . Estoy dentro de mi abrigo, pero yo y mi abrigo acolchado estamos juntos. Somos una unidad.

Pero para recordar el margen , pienso en ” ¡Oye, dame un poco de margen! ” Es el espacio vacío entre tú y yo. No entres en mi zona de confort, mi margen.

Para hacerlo más claro, aquí hay una imagen de relleno y margen en un TextView :

enter image description here

diseño xml para la imagen de arriba

            

Relacionado

  • Gravedad vs layout_gravity
  • Match_parent vs wrap_content

El relleno es el espacio dentro del borde, entre el borde y el contenido de la vista real. Tenga en cuenta que el relleno va completamente alrededor del contenido: hay relleno en los lados superior, inferior, derecho e izquierdo (que puede ser independiente).

Los márgenes son los espacios fuera del borde, entre el borde y los otros elementos al lado de esta vista. En la imagen, el margen es el área gris fuera del objeto completo. Tenga en cuenta que, al igual que el relleno, el margen va completamente alrededor del contenido: hay márgenes en los lados superior, inferior, derecho e izquierdo.

Una imagen dice más de 1000 palabras (extraída del Margen Vs Padding – Propiedades de CSS ):

texto alternativo

El relleno está dentro de una Vista.

El margen está fuera de una vista.

Esta diferencia puede ser relevante para las propiedades de fondo o tamaño.

El relleno está dentro de la vista, el margen está afuera. El relleno está disponible para todas las vistas. Dependiendo de la vista, puede haber o no una diferencia visual entre el relleno y el margen.

Para los botones, por ejemplo, la imagen de fondo del botón característico incluye el relleno, pero no el margen. En otras palabras, agregar más relleno hace que el botón se vea visualmente más grande, mientras que agregar más margen solo amplía la brecha entre el botón y el siguiente control.

Para TextView s, por otro lado, el efecto visual de relleno y margen es idéntico.

Si el margen está disponible o no está determinado por el contenedor de la vista, no por la vista en sí. En LinearLayout margen es compatible, en AbsoluteLayout (se considera obsoleto ahora) – no.

Debajo de la imagen podrás entender el relleno y el margen

enter image description here

El relleno es el espacio dentro del borde entre el borde y la imagen real o contenido de la celda. Los márgenes son los espacios fuera del borde, entre el borde y los otros elementos al lado de este objeto.

A veces puede lograr el mismo resultado jugando solo con margen de relleno O. Ejemplo:

Say View X contiene la vista Y (también conocida como: View Y is in View X).

-Ver Y con Margen = 30 O Ver X con Relleno = 30 logrará el mismo resultado: La Vista Y tendrá un desplazamiento de 30.

Relleno
El relleno está dentro de una Vista. Por ejemplo, si le das a android:paddingLeft=20dp , los elementos dentro de la vista se organizarán con 20dp ancho de 20dp desde la izquierda. También puedes usar paddingRight , paddingBottom , paddingTop que dan relleno desde la derecha, abajo y arriba respectivamente.

Margen
El margen está fuera de una View . Por ejemplo, si le das a android:marginLeft=20dp , la vista se organizará después de 20dp desde la izquierda.

Relleno significa espacio entre el widget y el marco original del widget. Pero el margen es el espacio entre el marco original del widget y el marco del otro widget. enter image description here .

Supongamos que tiene un botón en una vista y el tamaño de la vista es de 200 por 200, y el tamaño del botón es de 50 por 50, y el título del botón es HT, ahora la diferencia entre el margen y el relleno es, puede configurar el el margen del botón a la vista, por ejemplo 20 desde la izquierda 20 desde la parte superior, y el relleno ajustará la posición del texto en el botón o la vista de texto, etc., por ejemplo, el valor de relleno es 20 desde la izquierda. por lo que ajustará la posición del texto.

Margen se refiere al espacio extra fuera de un elemento. Relleno se refiere al espacio extra dentro de un elemento. El margen es el espacio extra alrededor del control. El relleno es espacio adicional dentro del control.

Es difícil ver la diferencia con el margen y el relleno con un relleno blanco, pero con un relleno de color se puede ver bien.

En palabras simples:
el relleno cambia el tamaño de la caja (con algo).
el margen cambia el espacio entre los diferentes cuadros

Además de todas las respuestas correctas anteriores, otra diferencia es que el relleno aumenta el área seleccionable de una vista, mientras que los márgenes no lo hacen. Esto es útil si tiene una imagen pequeña en la que se puede hacer clic pero desea hacer que el controlador de clic lo perdone.

Por ejemplo, vea esta imagen de mi diseño con un ImageView (el ícono de Android) donde configuro el paddingBotton como 100dp (la imagen es el ic_launcher existencias ic_launcher ). Con el manejador de clics adjunto pude hacer clic afuera y debajo de la imagen y todavía registrar un clic.

enter image description here

En palabras simples:

  1. Relleno: crea espacio dentro del borde de la vista.
  2. Margen: crea espacio fuera del borde de la vista.