Los márgenes son la separación horizontal y vertical que queda alrededor de un elemento HTML, a partir de la línea del borde hacia el exterior. Por defecto, los elementos no tienen ningún margen. Los márgenes se definen con la propiedad abreviada margin o con las propiedades específicas.
La propiedad CSS margin permite valores de longitud, que se pueden indicar como unidad relativa (porcentajes, em, rem) o absoluta (píxeles, picas, puntos, centímetros, milímetros, etc). Su valor inicial y por defecto será 0, es decir, sin márgenes definidos. Las más usadas son píxeles, em y porcentajes.
Esta propiedad admite de uno a cuatro parámetros. Si se usa un único parámetro se aplica a los cuatro lados por igual. Si se usa dos parámetros, el primero se aplica al eje vertical (arriba y abajo) y el segundo al eje horizontal (derecha e izquierda). Si se indica tres parámetros, el primero se aplica arriba, el segundo a ambos lados y el tercero abajo. Si se indica cuatro parámetros siguen el orden de las agujas del reloj, es decir, arriba, derecha, abajo y terminando en la izquierda.
Tabla resumen de márgenes abreviados:
| Ejemplos | Descripción |
|---|---|
margin: 1px | A los cuatro lados. |
margin: 1px 2px | Vertical, horizontal. |
margin: 1px 2px 3px | Arriba, horizontal, abajo. |
margin: 1px 2px 3px 4px | Arriba, derecha, abajo, izquierda. |
Tabla de valores globales de margin:
| Valor | Descripción |
|---|---|
inherit | Hereda el margen aplicado en el elemento padre. |
initial | Fuerza el uso del valor de margen inicial. |
unset | Restablece una propiedad a su valor heredado, y si no hereda la restablece a su valor inicial. |
revert | Restablece una propiedad a su valor heredado, y si no hereda la restablece a la hoja de estilos aplicada por el usuario en el navegador, y si no la tiene la restablece a su valor inicial. |
Con ayuda del valor auto para los márgenes de la izquierda y la derecha, el navegador los distribuirá equitativamente. Si el elemento tiene un ancho inferior al del elemento contenedor superior, quedará centrado.
Por ejemplo:
.centrado {
background: teal;
height: 34px;
margin: 0 auto;
width: 100px;
}
Resultado:
El elemento es más estrecho (100 píxeles) que su elemento padre, y ha quedado centrado gracias a que el margen está definido como auto (automático) en el eje horizontal. Para los márgenes de arriba y abajo su valor es 0. De hecho, es muy habitual usar el valor 0 auto para centrar elementos.
Propiedades específicas de margen
Los márgenes de un elemento se pueden definir por separado mediante cuatro propiedades específicas del lenguaje CSS, sin tener que usar las abreviaturas. De esta manera, es posible cambiar los márgenes de arriba, abajo, izquierda y derecha de forma independiente. Son las siguientes:
| Propiedad | Descripción |
|---|---|
margin-top | Especifica el margen en la parte superior. |
margin-right | Especifica el margen en la parte derecha. |
margin-bottom | Especifica el margen en la parte inferior. |
margin-left | Especifica el margen en la parte izquierda. |
Veamos como se aplican.
La propiedad ‘margin-top’
Con la propiedad margin-top se especifica un valor de margen que se aplicará en la parte superior del elemento HTML seleccionado. Para visualizarlo, hemos creado un elemento contenedor y un elemento interior con márgenes modificados.
.arriba {
margin-top: 10px;
}
Resultado:
La propiedad ‘margin-right’
Para modificar el margen de la derecha de un elemento HTML se debe usar la propiedad margin-right. En este caso, hacemos uso de una función CSS para restarle 10 píxeles al ancho total; la veremos más adelante.
.derecha {
margin-right: 10px;
}
Resultado:
La propiedad ‘margin-bottom’
Mediante la propiedad margin-bottom es posible aplicar un margen en la parte inferior del elemento HTML seleccionado. Se trata de una propiedad muy usada para dar margen inferior a los párrafos.
.abajo {
margin-bottom: 10px;
}
Resultado:
La propiedad ‘margin-left’
Finalmente, la propiedad margin-left permite aplicar un margen al lado izquierdo del elemento HTML seleccionado.
.left {
margin-left: 10px;
}
Resultado:
Combinación de márgenes
En ocasiones, los márgenes de arriba y abajo de los elementos de bloque están combinados en uno solo, como si se hubieran fusionado, sin sumarse. El tamaño del margen resultante es el mayor de los dos márgenes. Esta combinación no sucede con elementos flotantes o si tienen posición absoluta.
La combinación de márgenes ocurre en estos casos:
- Dos elementos que son hermanos adyacentes
- Elemento padre con el primer elemento hijo
- Elemento padre con el último elemento hijo
- Bloques vacíos (los dos márgenes colapsan)
