Espaciado

Margin y padding

Asigna valores de “margin” o “padding” responsive a un elemento o un subconjunto de sus lados con clases abreviadas. Incluye soporte para propiedades individuales, todas las propiedades y propiedades verticales y horizontales. Las clases se crean a partir de un mapa Sass predeterminado que va desde .25rem a 3rem.

¿Utilizas el módulo de diseño de cuadrícula CSS? Considera usar la utilidad gap.

Notación

Las utilidades de espaciado que se aplican a todos los breakpoint, desde xs hasta xxl, no tienen abreviatura de breakpoint. Esto se debe a que esas clases se aplican desde min-width: 0 en adelante y, por lo tanto, no están vinculadas a una media query. Sin embargo, los breakpoints restantes sí incluyen una abreviatura de breakpoint.

Las clases se nombran usando el formato {property}{sides}-{size} para xs y {property}{sides}-{breakpoint}-{size} para sm, md, lg, xl y xxl.

Donde property es uno de:

• m - para clases que establecen margin
• p - para clases que establecen padding

Donde sides es uno de:

• t - para clases que establecen margin-top o padding-top
• b - para clases que establecen margin-bottom o padding-bottom
• s - (start) para clases que establecen margin-left o padding-left en LTR, margin-right o padding-right en RTL
• e - (end) para clases que establecen margin-right o padding-right en LTR, margin-left o padding-left en RTL
• x - para clases que establecen tanto *-left como *-right
• y - para clases que establecen tanto *-top como *-bottom
• en blanco - para clases que establecen un margin o padding en los 4 lados del elemento

Donde size es uno de:

• 0 - para clases que eliminan el margin o padding al establecerlo en 0
• 1 - (por defecto) para las clases que establecen el margin o padding en $spacer * .25
• 2 - (por defecto) para las clases que establecen el margin o padding en $spacer * .5
• 3 - (por defecto) para las clases que establecen el margin o padding en $spacer
• 4 - (por defecto) para las clases que establecen el margin o padding en $spacer * 1.5
• 5 - (por defecto) para las clases que establecen el margin o padding en $spacer * 3
• auto - para clases que establecen el margin en automático

(Puedes agregar más tamaños agregando entradas a la variable de mapa Sass $spacers).

Ejemplos

Estos son algunos ejemplos representativos de estas clases:

.mt-0 {
  margin-top: 0 !important;
}

.ms-1 {
  margin-left: ($spacer * .25) !important;
}

.px-2 {
  padding-left: ($spacer * .5) !important;
  padding-right: ($spacer * .5) !important;
}

.p-3 {
  padding: $spacer !important;
}

Centrado horizontal

Además, Bootstrap también incluye una clase .mx-auto para centrar horizontalmente contenido de nivel de bloque de ancho fijo, es decir, contenido que tiene display: block y un conjunto width, configurando los márgenes horizontales en auto .

<div class="mx-auto" style="width: 200px;">
  Elemento centrado
</div>

Margen negativo

En CSS, las propiedades margin pueden utilizar valores negativos (padding no). Estos márgenes negativos están deshabilitados de forma predeterminada, pero se pueden habilitar en Sass configurando $enable-negative-margins: true.

La sintaxis es casi la misma que las utilidades de margen positivo predeterminadas, pero con la adición de n antes del tamaño solicitado. Aquí hay una clase de ejemplo que es lo opuesto a .mt-1:

.mt-n1 {
  margin-top: -0.25rem !important;
}

Gap (espacios entre elementos)

Al usar display: grid, puede utilizar las utilidades gap en el contenedor de cuadrícula principal. Esto puede evitar tener que agregar utilidades de margen a elementos de cuadrícula individuales (hijos de un contenedor display: grid). Las utilidades Gap responden de forma predeterminada y se generan a través de nuestra API de utilidades, según el mapa Sass $spacers.

<div class="d-grid gap-3">
  <div class="p-2 bg-light border">Elemento de cuadrícula 1</div>
  <div class="p-2 bg-light border">Elemento de cuadrícula 2</div>
  <div class="p-2 bg-light border">Elemento de cuadrícula 3</div>
</div>

El soporte incluye opciones responsive para todos los puntos de interrupción de la cuadrícula de Bootstrap, así como seis tamaños del mapa $spacers (0–5). No hay clase de utilidad .gap-auto ya que es efectivamente lo mismo que .gap-0.

Sass

Mapas

Las utilidades de espaciado se declaran a través del mapa Sass y luego se generan con nuestra API de utilidades.

$spacer: 1rem;
$spacers: (
  0: 0,
  1: $spacer * .25,
  2: $spacer * .5,
  3: $spacer,
  4: $spacer * 1.5,
  5: $spacer * 3,
);

API de utilidades

Las utilidades de espaciado se declaran en nuestra API de utilidades en scss/_utilities.scss. Aprende a usar la API de utilidades.

    "margin": (
      responsive: true,
      property: margin,
      class: m,
      values: map-merge($spacers, (auto: auto))
    ),
    "margin-x": (
      responsive: true,
      property: margin-right margin-left,
      class: mx,
      values: map-merge($spacers, (auto: auto))
    ),
    "margin-y": (
      responsive: true,
      property: margin-top margin-bottom,
      class: my,
      values: map-merge($spacers, (auto: auto))
    ),
    "margin-top": (
      responsive: true,
      property: margin-top,
      class: mt,
      values: map-merge($spacers, (auto: auto))
    ),
    "margin-end": (
      responsive: true,
      property: margin-right,
      class: me,
      values: map-merge($spacers, (auto: auto))
    ),
    "margin-bottom": (
      responsive: true,
      property: margin-bottom,
      class: mb,
      values: map-merge($spacers, (auto: auto))
    ),
    "margin-start": (
      responsive: true,
      property: margin-left,
      class: ms,
      values: map-merge($spacers, (auto: auto))
    ),
    // Negative margin utilities
    "negative-margin": (
      responsive: true,
      property: margin,
      class: m,
      values: $negative-spacers
    ),
    "negative-margin-x": (
      responsive: true,
      property: margin-right margin-left,
      class: mx,
      values: $negative-spacers
    ),
    "negative-margin-y": (
      responsive: true,
      property: margin-top margin-bottom,
      class: my,
      values: $negative-spacers
    ),
    "negative-margin-top": (
      responsive: true,
      property: margin-top,
      class: mt,
      values: $negative-spacers
    ),
    "negative-margin-end": (
      responsive: true,
      property: margin-right,
      class: me,
      values: $negative-spacers
    ),
    "negative-margin-bottom": (
      responsive: true,
      property: margin-bottom,
      class: mb,
      values: $negative-spacers
    ),
    "negative-margin-start": (
      responsive: true,
      property: margin-left,
      class: ms,
      values: $negative-spacers
    ),
    // Padding utilities
    "padding": (
      responsive: true,
      property: padding,
      class: p,
      values: $spacers
    ),
    "padding-x": (
      responsive: true,
      property: padding-right padding-left,
      class: px,
      values: $spacers
    ),
    "padding-y": (
      responsive: true,
      property: padding-top padding-bottom,
      class: py,
      values: $spacers
    ),
    "padding-top": (
      responsive: true,
      property: padding-top,
      class: pt,
      values: $spacers
    ),
    "padding-end": (
      responsive: true,
      property: padding-right,
      class: pe,
      values: $spacers
    ),
    "padding-bottom": (
      responsive: true,
      property: padding-bottom,
      class: pb,
      values: $spacers
    ),
    "padding-start": (
      responsive: true,
      property: padding-left,
      class: ps,
      values: $spacers
    ),