Los márgenes y el relleno (padding) son elementos esenciales para gestionar el espaciado en el diseño web.
Si sabes cuándo y cómo aprovechar cada uno, estarás en el camino correcto para crear sitios web impresionantes y adaptables que luzcan genial en cualquier dispositivo. Pero dominarlos puede requerir algo de práctica.
Si eres nuevo en CSS o te interesa aprender más sobre la diferencia entre márgenes y padding, sigue leyendo para descubrir exactamente qué son y cómo decidir cuándo usar cada uno.
Conceptos básicos de diseño web y programación
Antes de sumergirnos en los matices de los márgenes y el padding, repasemos rápidamente los fundamentos del desarrollo web: HTML y CSS .
HTML (HyperText Markup Language) le indica a tu navegador cómo mostrar una página web. CSS (Cascading Style Sheets) proporciona un conjunto de reglas que se aplican al HTML y rigen el estilo de un sitio. Dependes del HTML para definir el texto específico de un encabezado, pero puedes usar CSS para establecer una fuente, un tamaño de texto y un color consistentes para todos los encabezados de la misma clase en todo el sitio web.
La invención de CSS cambió las reglas del juego en el desarrollo web porque eliminó la necesidad de escribir o reescribir una línea de código de estilo individual para cada elemento en cada página. CSS te permite establecer parámetros consistentes para elementos de la misma clase y realizar cambios en toda la clase al mismo tiempo.
¿Qué es el modelo de caja de CSS?
CSS utiliza lo que se llama modelo de caja para indicar a los navegadores cómo mostrar y espaciar los diferentes elementos en una página web. Todos los sitios web están compuestos por una serie de cajas y estas tienen cuatro componentes principales.
- Contenido - La parte más interna de la caja. El contenido puede ser una imagen, texto, un encabezado o cualquier otra cosa.
- Padding (Relleno) - El espacio interior entre el contenido y el borde de la caja.
- Borde - El perímetro de la caja. Los bordes pueden ser invisibles o ser una línea gruesa de color, como la verde que se muestra arriba.
- Margen - El espacio exterior (o la ausencia de espacio) que rodea la caja.
Puedes alinear las cajas CSS vertical u horizontalmente. Puedes colocarlas una al lado de la otra, anidarlas dentro de otras o incluso superponerlas.
¿Cuál es la diferencia entre margen y padding en CSS?
La principal diferencia entre el padding y el margen es que el padding controla cuánto espacio de aire existe dentro de una caja, mientras que el margen controla cuánto espacio de aire o espacio en blanco existe fuera de una caja.
- Margen: Afecta al espacio exterior, puede establecerse en valores automáticos o negativos, y no afecta el fondo del elemento.
- Padding: Afecta al espacio interior, aumenta el tamaño de la caja del elemento y extiende el fondo o el color detrás del contenido.
Puedes establecer el padding en cero píxeles o más. Al ajustar el padding, puedes cambiar el tamaño del elemento e influir en cuánto color de relleno o imagen de fondo es visible dentro de una caja.
Los márgenes, por otro lado, son básicamente barreras invisibles alrededor de una caja. Definen cómo interactúa tu elemento con los elementos adyacentes o con el borde de la pantalla. Puedes establecer los márgenes en cero o más, igual que con el relleno (padding). Pero a diferencia del relleno, también puedes configurar los márgenes en automático e incluso usar valores negativos.
Similitudes entre margen y relleno
En ciertas situaciones, puedes usar tanto el margen como el relleno para lograr resultados similares, y esto es lo que hace que el modelo de caja sea un poco confuso. Aquí tienes un ejemplo.
La imagen de arriba muestra un conjunto de cajas anidadas y su espaciado correspondiente en Webflow. Tenemos una caja contenedora con un borde negro sólido y un relleno o color de fondo azul claro. Dentro de ese contenedor, hay un bloque div que contiene una imagen de logotipo (contenido), cero píxeles de relleno, un borde negro punteado y un margen de 100 píxeles.
Pero podrías lograr exactamente la misma apariencia usando el relleno de la caja contenedora en lugar del margen del bloque div. En la imagen de abajo, hemos aumentado el relleno del contenedor de cero a 100 píxeles y disminuido el margen del bloque div de 100 píxeles a cero.
A veces, no hay una respuesta única sobre si debes usar margen o relleno. Así que no temas experimentar con ambas opciones. Solo asegúrate de revisar cómo se ve tu diseño en diferentes tamaños de pantalla y ajústalo según sea necesario para garantizar que tu diseño web adaptable se vea genial en cualquier dispositivo.
Como puedes ver en la imagen de arriba, aunque 100 píxeles de margen pueden verse muy bien en la pantalla de una computadora grande, tu contenido podría volverse imperceptiblemente pequeño al verlo en un teléfono celular.
Entender cómo el margen y el relleno afectan tu diseño CSS es esencial si quieres un espaciado de diseño consistente y adaptable en cualquier dispositivo.
Cuándo usar margen CSS frente a relleno
Puedes usar el relleno CSS para:
- ajustar el espacio de aire directamente alrededor del contenido
- ajustar el tamaño de las cajas o elementos HTML
Echemos un vistazo a algunos ejemplos.
Ajustar el espacio de aire alrededor del contenido
Puedes usar el relleno para ajustar fácilmente el espacio de aire alrededor del contenido dentro de un elemento, como un botón o una tarjeta de información. Aquí tienes un ejemplo usando la plantilla de sitio web minorista Mariela. Esta plantilla viene con una hermosa sección de introducción en la página de inicio que muestra tres "Cajas de introducción".
Las "Cajas de introducción" contienen una imagen y una "Caja de texto de introducción". Podrías añadir más espacio en blanco —o en este caso, más espacio de tono cardo medio— alrededor del texto aumentando el relleno de la "Caja de texto de introducción". Así es como se ve.
Y como has usado la misma clase (Caja de texto de introducción) para las tres tarjetas, solo necesitas ajustarlo una vez en Webflow y el cambio se replicará en las tres. También podrías añadir un poco de espacio de aire alrededor de las imágenes añadiendo relleno a la caja de la imagen. Así es como se ve.
Finalmente, podrías añadir espacio de aire dentro de las "Cajas de texto de introducción" de manera uniforme seleccionando toda la caja, manteniendo presionada la tecla Shift y arrastrando el control de relleno en Webflow.
Como puedes ver, añadir relleno a diferentes elementos crea espacio directamente alrededor del contenido dentro de una caja.
Consigue gratis nuestro curso de 100 vídeos sobre diseño web
Desde los fundamentos hasta temas avanzados: aprende a crear sitios en Webflow y conviértete en el diseñador que siempre quisiste ser.
Ajustar el tamaño general de un elemento
También puedes usar el relleno (padding) para ajustar el tamaño de los elementos. Aquí tienes un ejemplo con la plantilla de sitio web de venta minorista Toystore. Esta plantilla tiene un bloque div "Hero Intro" en la parte superior con un color de fondo blanco.
Puedes hacer que el recuadro blanco sea más pequeño disminuyendo el relleno (que viene preconfigurado a 24 píxeles). Abajo puedes ver cómo queda si cambias el relleno a 5 píxeles en todos los lados.
O bien, puedes hacer que el recuadro sea más grande aumentando el relleno. Abajo puedes ver qué sucede cuando aumentas el relleno a 100 píxeles en todos los lados.
Si prefieres un aspecto más asimétrico, también puedes usar el relleno para añadir espacio en blanco a uno o dos lados solamente. Esto es lo que ocurre cuando estableces el relleno superior e inferior en 140 píxeles, pero dejas el relleno izquierdo y derecho en 24 píxeles.
Terminas con más espacio en blanco en la parte superior e inferior del recuadro, pero menos en los laterales.
Ahora que has explorado cómo el relleno puede cambiar la forma de un elemento, veamos cómo el margen juega un papel distinto en el posicionamiento y el espaciado.
Cuándo usar el margen CSS
Puedes usar el margen CSS para:
- centrar recuadros
- ajustar el aire alrededor de los recuadros
- superponer elementos
Echemos un vistazo a algunos ejemplos.
Centrar elementos en una página web
Para centrar elementos horizontalmente en una página usando márgenes, solo tienes que establecer el margen derecho e izquierdo en Auto. Puedes ver ejemplos de esta técnica por toda la web, pero aquí tienes uno con el que puedes experimentar en Webflow. Abre la plantilla de sitio web de la marca Method y haz clic en el contenedor Hero en la parte superior.
Notarás que los márgenes derecho e izquierdo están configurados en Auto.
Así es como funcionan también los recuadros de contenedor en Webflow. Cuando añades un nuevo contenedor a un proyecto en el lienzo, los márgenes derecho e izquierdo vienen preconfigurados en Auto para centrar el contenedor.
Ajustar el aire fuera de los recuadros
Para demostrar cómo puedes usar el margen para ajustar el aire o el espacio en blanco fuera de los recuadros, volvamos a la plantilla de sitio web de venta minorista Mariela. Una vez más, así es como se ven los "Intro Boxes" cuando abres la plantilla por primera vez en Webflow.
Los "Intro Boxes" vienen preconfigurados con un margen derecho del 3% en los dos primeros recuadros de izquierda a derecha. Así es como se ve si estableces todos los valores de margen a cero.
Puedes añadir márgenes a un lado de un recuadro, o a tantos como quieras. Pero hay algo que debes tener en cuenta al jugar con los márgenes: el colapso de márgenes.
En muchos casos, si tienes dos elementos adyacentes, los márgenes de cada uno se sumarán y el margen mostrado será el resultado de esa suma.
Por lo tanto, si la tarjeta A tiene un margen derecho de 5 píxeles y la tarjeta B (situada a la derecha de la tarjeta A) tiene un margen izquierdo de 5 píxeles, el espacio en blanco entre las tarjetas será de 10 píxeles.
Pero en ciertos casos, especialmente cuando dos elementos están apilados uno encima del otro, se respetará el margen mayor y el menor se colapsará, o se tratará como si fuera cero. Puedes ver un ejemplo de colapso de márgenes en los cuadros de texto sobre los "Intro Boxes" en la plantilla de sitio web de venta minorista Mariela. Si haces clic en cada recuadro en Webflow, verás que el margen inferior del "Mini Title" está configurado en 10 píxeles y el margen superior está configurado en cero píxeles para el "Intro Paragraph".
Y si añades menos de 11 píxeles al margen superior del "Párrafo de introducción", no ocurre nada. Esto se debe a que el margen más pequeño se colapsa.
Uso de márgenes para superponer elementos
Una de las cosas geniales de los márgenes es que puedes usarlos para superponer cajas o elementos en una página web. Aquí tienes un ejemplo de la plantilla para sitios móviles Donerun. La imagen del iPhone se superpone a la franja marrón sólida, lo que le da profundidad y hace que parezca que está encima del resto de la página.
Este efecto se logró usando márgenes negativos en la parte superior e inferior de la imagen. Para comparar, esto es lo que sucede cuando estableces los márgenes de la imagen del iPhone a cero en todos los lados.
El iPhone ya no se superpone a la franja de color en la parte inferior de la página y ahora aparece paralelo al encabezado a la izquierda de la imagen.
Los márgenes negativos pueden desplazar elementos hacia arriba o hacia los lados, permitiendo diseños creativos. Sin embargo, úsalos con cuidado para evitar superposiciones no deseadas.
Cuándo no usar margen o relleno
Las propiedades de margen y relleno son fantásticas para crear espacio o aire en tu diseño. Pero no son los únicos controles a tu disposición. Y a veces, ninguno de los dos es tu mejor opción. Si aún no conoces los controles de posición CSS y Flexbox, echa un vistazo a algunas de las lecciones sobre estos temas en Webflow University. Si el diseño sigue siendo complicado, explora métodos de posicionamiento avanzados como Flexbox o CSS Grid para mantener tu diseño limpio y fácil de usar.
Preguntas frecuentes
¿Cuál es la diferencia entre relleno y margen en CSS?
El relleno es el espacio entre el contenido de un elemento y su borde, mientras que el margen es el espacio fuera del elemento que lo separa de los elementos circundantes. Ambos controlan el espaciado, pero afectan al diseño y a la presentación visual de formas distintas.
¿Cuándo debería usar relleno frente a margen?
Usa el relleno para crear espacio dentro de un elemento, como en un botón, una tarjeta o un contenedor de contenido. Usa el margen para crear espacio entre elementos separados, lo que ayuda a organizar las secciones de la página y a establecer una jerarquía visual clara.
¿Qué es el colapso de márgenes y cómo lo soluciono?
El colapso de márgenes ocurre cuando los márgenes verticales de elementos de bloque adyacentes se combinan en un solo margen en lugar de apilarse. Para evitar este comportamiento, puedes usar relleno, bordes o métodos de diseño modernos como Flexbox o Grid para controlar el espaciado de forma más predecible.
¿El relleno afecta al ancho de un elemento?
Depende del modelo de caja que se utilice. Con el modelo content-box predeterminado, el relleno aumenta el tamaño total de un elemento. Al usar box-sizing: border-box, el relleno se incluye dentro del ancho declarado, lo que facilita el dimensionamiento y la gestión de los diseños.
Empieza gratis
Crea sitios web personalizados y escalables, sin escribir código. Empieza a construir en Webflow.
