Espaciado
El sistema de espaciado (spacing) de Bootstrap es probablemente la utilidad de Bootstrap que más se usa.
La estrucutra de la clase siempre sigue el siguiente patrón:
{propiedad}{lado}-{tamaño}¿Qué es? Propiedad
- m (margin): Es el espacio externo. Empuja a los elementos vecinos, es la propiedad de margin que conocemos de CSS
- p (padding): Es el espacio interno. Hace quye la caja sea más grande por dentro, aleja el contenido del borde. Es la propiedad padding
¿Dónde se aplica? Lado
- t (top): Arrba
- b (bottom): Abajo
- s (start): Izquierda (o el inicio del texto).
- e (end): Derecha (o el final del texto)
- x (Eje horizontal): Izquierda y derecha a la vez
- y (Eje vertical): Arriba y abajo a la vez.
- (vacío): Se aplica a los 4 lados.
¿Cuánto espacio? Tamaño
Bootstrap usa una escala predefinida basada en una unidad llamada rem (donde normalmente 1rem = 16px).
- 0: Elimina el espacio (0px). Útil para resetear márgenes por defecto.
- 1: Muy poco espacio (0.25rem o ~4px).
- 2: Poco espacio (0.5rem o ~8px).
- 3: Espacio estándar (1rem o ~16px).
- 4: Espacio grande (1.5rem o ~24px).
- 5: Espacio muy grande (3rem o ~48px).
- auto: Automático (se usa solo en márgenes para centrar elementos)