Margen y Relleno (padding) en CSS

margin-top
margin-right
margin-bottom
margin-left
Margen superior

Margen derecho

Margen inferior

Margen izquierdo

Valores <medida> | <porcentaje> | auto | inherit
Se aplica a Todos los elementos, salvo margin-top y margin-bottom que sólo se aplican a los elementos de bloque y a las imágenes
Valor inicial 0
Descripción Establece cada uno de los márgenes horizontales y verticales de un elemento

Existen abreviaciones llamadas shorthand para ciertas propiedades, tal como margen.

  • Si solo se indica un valor, todos los márgenes tienen ese valor.
  • Si se indican dos valores, el primero se asigna al margen superior e inferior y el segundo se asigna a los márgenes izquierdo y derecho.
  • Si se indican tres valores, el primero se asigna al margen superior, el tercero se asigna al margen inferior y el segundo valor se asigna los márgenes izquierdo y derecho.
  • Si se indican los cuatro valores, el orden de asignación es: margen superior, margen derecho, margen inferior y margen izquierdo.

 

Fusión de márgenes

El comportamiento de los márgenes verticales es más complejo de lo que se puede imaginar. Cuando se juntan dos o más márgenes verticales, se fusionan de forma automática y la altura del nuevo margen será igual a la altura del margen más alto de los que se han fusionado.

Padding (relleno)

padding-top
padding-right
padding-bottom
padding-left
Relleno superior

Relleno derecho

Relleno inferior

Relleno izquierdo

Valores <medida> | <porcentaje> | inherit
Se aplica a Todos los elementos excepto algunos elementos de tablas como grupos de cabeceras y grupos de pies de tabla
Valor inicial 0
Descripción Establece cada uno de los rellenos horizontales y verticales de un elemento

Al igual que con margen, existe shorthand para el padding respetando las mismas reglas de las manecillas del reloj

About Michelle Torres

Licenciada en Informática con Maestría en Tecnologías de la Información. Docente por convicción con trece años de experiencia, desarrolladora desde hace nueve años trabajando actualmente con desarrollo WEB para alta disponibilidad, además de ser consultor independiente y capacitador. Participe del movimiento del software libre como fiel apasionada, reconocida por su actividad en la comunidad y su participación en la inclusión.