Márgenes y rellenos

En el modelo de cajas, los márgenes (margin) son los espacios exteriores de un elemento. El espacio que hay entre el borde de un elemento y el borde de otros elementos adyacentes, es lo que se considera márgen.

Márgenes

Dichos márgenes se pueden considerar en conjunto (de forma general) o de forma concreta en cada una de las zonas del elemento. Veamos primero las propiedades específicas para cada zona:

Propiedad Valor Significado
margin-top auto | Establece un tamaño de margen superior.
margin-left auto | Establece un tamaño de margen a la izquierda.
margin-right auto | Establece un tamaño de margen a la derecha.
margin-bottom auto | Establece un tamaño de margen inferior.

Podemos aplicar diferentes márgenes a cada zona de un elemento utilizando cada una de estas propiedades, o dejando al nevegador que lo haga de forma automática indicando el valor auto.

Truco: Existe un truco muy sencillo y práctico para centrar un elemento en pantalla. Basta con aplicar un ancho fijo al contenedor, width:500px (por ejemplo) y luego aplicar un margin:auto. De esta forma, el navegador, al conocer el tamaño del elemento (y por omisión, el resto del tamaño de la ventana) se encarga de repartirlo equitativamente entre el margen izquierdo y el margen derecho, quedando centrado el elemento.

Hay que recordar diferenciar bien los márgenes de los rellenos, puesto que no son la misma cosa. Los rellenos (padding) son los espacios que hay entre los bordes del elemento en cuestión y el contenido del elemento (por la parte interior). Mientras que los márgenes (margin) son los espacios que hay entre los bordes del elemento en cuestión y los bordes de otros elementos (parte exterior).

Observese también el siguiente ejemplo para ilustrar el solapamiento de márgenes. Por defecto, si tenemos dos elementos adyacentes con, por ejemplo, margin: 20px cada uno, ese espacio de margen se solapará y tendremos 20px en total, y no 40px (la suma de cada uno) como podríamos pensar en un principio.

Márgenes CSS solapados

Rellenos

Al igual que con los márgenes, los rellenos tienen varias propiedades para indicar cada zona:

Propiedad Valor Significado
padding-top 0 | Aplica un relleno interior en el espacio superior de un elemento.
padding-left 0 | Aplica un relleno interior en el espacio izquierdo de un elemento.
padding-right 0 | Aplica un relleno interior en el espacio derecho de un elemento.
padding-bottom 0 | Aplica un relleno interior en el espacio inferior de un elemento.

Como se puede ver en la tabla, por defecto no hay relleno (el relleno está a cero), aunque puede modificarse tanto con las propiedades anteriores como la propiedad de atajo que veremos a continuación.

Atajo: Modelo de cajas

Al igual que en otras propiedades de CSS, también existen atajos para los márgenes y los rellenos:

Propiedad Valores Significado
margin 1 parámetro. Aplica el mismo margen a todos los lados.
2 parámetros. Aplica margen top/bottom y left/right.
3 parámetros. Aplica margen top, left/right y bottom.
4 parámetros. Aplica margen top, right, bottom e left.

Con las propiedades padding y border-width pasa exactamente lo mismo, actuando en relación a los rellenos, en lugar de los márgenes en el primer caso, y en relación al grosor del borde de un elemento en el segundo.

Ojo: Aunque al principio es muy tentador utilizar márgenes negativos para ajustar posiciones y colocar los elementos como queremos, se aconseja no utilizar dicha estrategia salvo para casos muy particulares, ya que a la larga es una mala práctica que hará que nuestro código sea de peor calidad.

Manz
Publicado por Manz

Docente, divulgador informático y freelance. Autor de Emezeta.com, es profesor en la Universidad de La Laguna y dirige el curso de Programación web FullStack y Diseño web FrontEnd de EOI en Tenerife (Canarias). En sus ratos libres, busca GIF de gatos en Internet.