ManzDev
Perfil de Manz Dashboard de actividad
HTML5 Etiquetas HTML
CSS CSS vanilla
PostCSS Transformador CSS
Javascript Javascript ES2020+
NPM Node Package Manager
WebComponents Componentes web
Terminal Terminal de GNU/Linux
VueJS Framework VueJS 3
Automatizadores Empaquetadores Javascript
Youtube Canal de Youtube
Twitch Canal de Twitch
Telegram Canal de Telegram
Discord Servidor de Discord

Márgenes y rellenos

En el modelo de cajas, los márgenes (margin) son los espacios exteriores de un elemento. Es decir, el espacio que hay entre el borde de un elemento y su exterior.

La propiedad margin (márgenes)

El tamaño de dichos márgenes se puede alterar en conjunto (de forma general) o de forma específica a cada una de las zonas del elemento (izquierda, derecha, arriba o abajo). 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.

Existe un truco muy sencillo y práctico para centrar horizontalmente 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 un margin de un padding, 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

La parte en naranja es la que consideramos margin, mientras que la parte en verde es la que consideramos padding.

La propiedad padding (rellenos)

Al igual que con los márgenes, los padding tienen varias propiedades para indicar el relleno de 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 existe una propiedad de atajo denominada margin y padding. Con estas propiedades evitamos tener que escribir los valores de cada parte (izquierda, derecha, arriba, abajo...), especialmente importante si es el mismo valor en las cuatro.

No obstante, tenemos 4 modalidades, que dependen del número de parámetros de la propiedad:

Propiedad Valores Significado
margin o padding 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 la propiedad border-width pasa exactamente lo mismo que con margin y padding, actuando en este caso en relación al grosor del borde de un elemento. Veamos algunos ejemplos:

.examples {
  margin: 15px;
  /* Equivalente a margin: 15px 15px 15px 15px; */

  margin: 20px 10px;
  /* Equivalente a margin: 20px 10px 20px 10px; */

  margin: 20px 10px 5px;
  /* Equivalente a margin: 20px 10px 5px 10px; */
}

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

Manz
Publicado por Manz

Docente, divulgador informático y Streamer de código. Amante del CSS y de la plataforma web en general. Autor de Emezeta.com tiempo atrás. Ha trabajado como profesor en la Universidad de La Laguna y es director del curso de Programación web FullStack y FrontEnd de EOI en Tenerife. En sus ratos libres, busca GIF de gatos en Internet.