Los márgenes y el relleno pueden ser confusos porque, en cierto modo, parecen lo mismo: espacios en blanco alrededor de una imagen u objeto. Esto es lo que usted, como diseñador web, necesita saber acerca de sus diferencias.
Relleno
El relleno es el espacio entre una imagen o el contenido de una celda y su borde exterior. En la imagen de abajo, el relleno es el área amarilla alrededor del contenido. En este caso, el relleno rodea completamente el contenido: los lados superior, inferior, derecho e izquierdo. Puede especificar cuánto relleno (en porcentaje, píxeles, puntos, etc.) para cada lado, y no tienen que ser iguales. De esta forma, puede posicionar el contenido dentro de un elemento.
Márgenes
Por el contrario, los márgenes son los espacios fuera del borde de un elemento, entre el elemento y lo que sea adyacente. En la imagen, el margen es el área blanca fuera de todo el objeto. Al igual que el relleno, el margen rodea completamente el contenido en este ejemplo: en los lados superior, inferior, derecho e izquierdo. Puede usar márgenes para colocar divisiones y otros elementos en una página.
Siempre pruebe sus páginas en varios navegadores, sistemas operativos (incluidos dispositivos móviles) y tamaños de pantalla para asegurarse de que se muestren exactamente como usted desea.
