Unidad 10. CSS. Unidades. Color. Margen. Fondo. Borde (VI)

10.6. Margin

En este vídeo explicamos el margin y el padding:

El atributo margin define el espacio transparente entre el borde de la caja y los elementos adyacentes. Es el margen exterior de la caja. Puede tener valores numéricos enteros positivos y negativos. El valor cero indica que no existe margin. Un valor negativo hace que se "introduzca" en el elemento contiguo. El margin se compone de cuatro valores, uno para cada lado. Se pueden indicar de forma compacta o de forma explícita.

- margin de forma explícita: margin superior con margin-top; margin derecho con margin-right; margin inferior con margin-bottom; margin izquierdo con margin-left.

- margin de forma compacta, en este caso hay cuatro variantes:

a) Con un sólo número. Se aplica el valor a las cuatro posiciones del margin. Por ejemplo margin:15px, es lo mismo que margin-top: 15px; margin-right: 15px; margin-bottom: 15px; margin-left: 15px.

 

b) Con dos números. Se aplica el primer valor al margin superior e inferior; y el segundo valor al margin derecho e izquierdo. Por ejemplo margin: 15px 25px, es lo mismo que margin-top: 15px; margin-right: 25px; margin-bottom: 15px; margin-left: 25px.

 

c) Con cuatro números. Se aplica el primer valor al margin superior, el segundo al derecho, el tercero al inferior y el cuarto al izquierdo. Por ejemplo margin:5px 15px 25px 35px, es lo mismo que margin-top: 5px; margin-right: 15px; margin-bottom: 25px; margin-left: 35px.

 

c) Con tres números. Se aplica el primer valor al margin superior, el segundo al derecho e izquierdo y el tercero al inferior. Por ejemplo margin:5px 15px 25px, es lo mismo que margin-top: 5px; margin-right: 15px; margin-left: 15px; margin-bottom: 25px.

 

Unidades.

El valor del margin se puede indicar con una unidad absoluta (px, mm, ..) o con una unidad relativa (%, em, ...). Se puede dar el valor auto que indica que se cree un margen de forma automática según los espacios disponibles con los elementos adyacentes, normalmente con los mismos valores arriba y abajo, y a derecha e izquierda; por esto se puede utilizar para centrar los elementos horizontalmente dando el valor auto a los márgenes izquierdo y derecho. También se puede heredar del elemento contenedor con el valor inherit.

El margen superior e inferior sólo es aplicable a elementos de bloque, como div y p, mientras que el margen izquierdo y derecho se pueden aplicar a todos los elementos.