Espaciado margin y padding

Avanzado
Bootstrap
Bootstrap
Actualizado: 28/05/2025

¡Desbloquea el curso completo!

IA
Ejercicios
Certificado
Entrar

Clases de margen

En Bootstrap, las clases de margen permiten controlar el espaciado externo de los elementos. Estas clases se utilizan para aplicar márgenes en uno o más lados de un elemento. Las clases de margen se componen de un prefijo m- seguido de un lado (top, bottom, start, end, x, y) y una escala de valores que varía de 0 a 5, auto o una unidad específica.

Las clases de margen se estructuran de la siguiente manera:

  • m{lado}-{valor}: Aplica un margen específico en el lado indicado del elemento.
  • m{t|b|s|e|x|y}-{valor}: Aplica un margen en una dirección específica.
    • t para top (arriba).
    • b para bottom (abajo).
    • s para start (inicio, izquierda en LTR).
    • e para end (final, derecha en LTR).
    • x para ambos lados horizontales (izquierda y derecha).
    • y para ambos lados verticales (arriba y abajo).

Los valores que se pueden asignar son:

  • 0: Sin margen.
  • 1: 0.25rem.
  • 2: 0.5rem.
  • 3: 1rem.
  • 4: 1.5rem.
  • 5: 3rem.
  • auto: Aplica un margen automático, útil para centrar elementos.

Ejemplos de uso de clases de margen:

<div class="border border-primary m-3">...</div> <!-- Aplica un margen de 1rem en todos los lados -->

<div class="border border-warning mt-4">...</div> <!-- Aplica un margen de 1.5rem en el lado superior -->

<div class="border border-success mb-2">...</div> <!-- Aplica un margen de 0.5rem en el lado inferior -->

<div class="border border-danger ms-1">...</div> <!-- Aplica un margen de 0.25rem en el lado izquierdo (inicio) -->

<div class="border border-info me-5">...</div> <!-- Aplica un margen de 3rem en el lado derecho (final) -->

<div class="border border-dark mx-auto" style="width: 200px;">...</div> <!-- Aplica margen automático en los lados izquierdo y derecho -->

Diferentes tipos de márgenes

Para márgenes negativos, se utiliza el prefijo n delante del valor, permitiendo aplicar márgenes negativos. Están desactivados por defecto pero pueden activarse en Sass:

<div class="mt-n1">...</div> <!-- Aplica un margen negativo de -0.25rem en el lado superior -->

<div class="mb-n3">...</div> <!-- Aplica un margen negativo de -1rem en el lado inferior -->

Márgenes responsive

Los márgenes pueden ajustarse según el tamaño de pantalla utilizando breakpoints responsive:

<!-- Margen que cambia según el tamaño de pantalla -->
<div class="m-2 m-md-4 m-lg-5">...</div> <!-- 0.5rem en móvil, 1.5rem en tablet, 3rem en desktop -->

<!-- Margen superior responsive -->
<div class="mt-1 mt-sm-3 mt-xl-5">...</div> <!-- 0.25rem en XS, 1rem en SM, 3rem en XL -->

<!-- Margen horizontal responsive -->
<div class="mx-auto mx-md-0">...</div> <!-- Centrado en móvil, normal en tablet+ -->

Clases de padding

Guarda tu progreso

Inicia sesión para no perder tu progreso y accede a miles de tutoriales, ejercicios prácticos y nuestro asistente de IA.

Progreso guardado
Asistente IA
Ejercicios
Iniciar sesión gratis

Más de 25.000 desarrolladores ya confían en CertiDevs

En Bootstrap, las clases de padding permiten controlar el espaciado interno de los elementos. Estas clases se utilizan para aplicar padding en uno o más lados de un elemento. La nomenclatura de las clases de padding sigue un esquema similar al de las clases de margen, utilizando el prefijo p- seguido de un lado (top, bottom, start, end, x, y) y una escala de valores que varía de 0 a 5.

Las clases de padding se estructuran de la siguiente manera:

  • p{lado}-{valor}: Aplica un padding específico en el lado indicado del elemento.
  • p{t|b|s|e|x|y}-{valor}: Aplica un padding en una dirección específica.
    • t para top (arriba).
    • b para bottom (abajo).
    • s para start (inicio, izquierda en LTR).
    • e para end (final, derecha en LTR).
    • x para ambos lados horizontales (izquierda y derecha).
    • y para ambos lados verticales (arriba y abajo).

Los valores que se pueden asignar son:

  • 0: Sin padding.
  • 1: 0.25rem.
  • 2: 0.5rem.
  • 3: 1rem.
  • 4: 1.5rem.
  • 5: 3rem.

Ejemplos de uso de clases de padding:

<div class="border border-primary p-3">...</div> <!-- Aplica un padding de 1rem en todos los lados -->

<div class="border border-warning pt-4">...</div> <!-- Aplica un padding de 1.5rem en el lado superior -->

<div class="border border-success pb-2">...</div> <!-- Aplica un padding de 0.5rem en el lado inferior -->

<div class="border border-danger ps-1">...</div> <!-- Aplica un padding de 0.25rem en el lado izquierdo (inicio) -->

<div class="border border-info pe-5">...</div> <!-- Aplica un padding de 3rem en el lado derecho (final) -->

<div class="border border-dark px-3">...</div> <!-- Aplica padding de 1rem en los lados izquierdo y derecho -->

Diferentes tipos de padding

Utilidades de gap

Bootstrap también proporciona utilidades de gap para espaciado entre elementos en contenedores flexbox y grid, ofreciendo una alternativa moderna al uso de márgenes individuales:

Gap en flexbox

<div class="d-flex gap-3">
  <div class="p-2 bg-light">Item 1</div>
  <div class="p-2 bg-light">Item 2</div>
  <div class="p-2 bg-light">Item 3</div>
</div>

Gap en grid

<div class="row g-4">
  <div class="col-md-4">
    <div class="p-3 bg-light">Columna 1</div>
  </div>
  <div class="col-md-4">
    <div class="p-3 bg-light">Columna 2</div>
  </div>
  <div class="col-md-4">
    <div class="p-3 bg-light">Columna 3</div>
  </div>
</div>

Gap responsive

<div class="d-flex gap-2 gap-md-4">
  <div class="p-2 bg-light">Item A</div>
  <div class="p-2 bg-light">Item B</div>
</div>

Las utilidades de gap son especialmente útiles para crear espaciado uniforme entre elementos sin necesidad de aplicar márgenes a cada elemento individual, simplificando el código y mejorando la consistencia del diseño.

Aprendizajes de esta lección

  • Comprender el uso de clases de margen (m-) para aplicar espacios externos a los elementos.
  • Entender las clases de padding (p-) para gestionar los espacios internos de un elemento.
  • Utilizar clases de alineación (justify-content-, align-items-, align-self-) para disponer elementos en contenedores flex y grid.
  • Aprender a aplicar márgenes negativos y su activación en Sass.
  • Implementar clases específicas para la alineación dentro del sistema de grid de Bootstrap.

Completa Bootstrap y certifícate

Únete a nuestra plataforma y accede a miles de tutoriales, ejercicios prácticos, proyectos reales y nuestro asistente de IA personalizado para acelerar tu aprendizaje.

Asistente IA

Resuelve dudas al instante

Ejercicios

Practica con proyectos reales

Certificados

Valida tus conocimientos

Más de 25.000 desarrolladores ya se han certificado con CertiDevs

⭐⭐⭐⭐⭐
4.9/5 valoración