margin
Propiedades de los márgenesCentrar un elemento

<< outline padding >>

Propiedades de los márgenes

El margen es el espacio exterior de un elemento, es decir, el espacio entre el borde de un elemento y su exterior. Las propiedades son:

  • margin-top, margin-bottom, margin-left, margin-right: Distancia del elemento respecto al que se encuentra en su parte de (arriba, abajo, izquierda y derecha en este orden). Se especifica de 3 formas:
  • ◦ auto: El navegador será el que decida cual será el margen a aplicar.
  • ◦ porcentaje (%): El margen será un porcentaje del espacio disponible para el elemento (si es margen de arriba o abajo, será el espacio del eje vertical, y si es el margen de derecha o izquierda, el espacio del eje horizontal. Puede usarse otra unidad relativa.
  • ◦ distancia (píxeles->px, centímetros->cm,...): distancia fija con respecto el margen superior, inferior, derecho o izquierdo.

Centrar un elemento

Para centrar un elemento en el eje horizontal, basta con poner el margen derecho e izquierdo automáticos, de esta forma, la mayoría de los navegadores pondrán el margen derecho e izquierdo del mismo tamaño centrando el elemento. Esto no funciona para centrarlo verticalmente.

.centro_h {
    /* Elemento centrado en el eje horizontal. */
     margin-left: auto;
     margin-right: auto;
}

Si queremos poner el valor auto a todos los márgenes, no hace falta que pongamos los valores a cada 1 de los 4 ejes. Esta solución le aplica el valor auto a los 4 márgenes.

centro_h {
     margin: auto;
}

<< outline padding >>