/
para buscarMétricas
Para comprender cómo aplicamos los espaciados con clases utilitarias CSS, es esencial revisar las unidades de medida (tokens) predefinidas que utilizamos. Estos tokens nos permiten mantener la consistencia en los espaciados y tamaños, creando un lenguaje común entre diseño y código.
UI Notes En general, para uso directo en el HTML, se recomienda emplear las clases CSS utilitarias. En caso contrario, se sugiere utilizar directamente el token en las propiedades CSS.
Paddings
Para espaciados que empujen el contenido1 usamos paddings.
| Breakpoint | Left | Right | Bottom | Top | Inline (X) | Block (Y) | Global (XY) |
| Mobile | pl: | pr: | pb: | pt: | px: | py: | p: |
| Tablet | md-pl: | md-pr: | md-pb: | md-pt: | md-px: | md-py: | md-p: |
| Desktop | lg-pl: | lg-pr: | lg-pb: | lg-pt: | lg-px: | lg-py: | lg-p: |
UI Notes 1 Como parte de la configuración global (normalize), todos los elementos HTML usan box-sizing: border-box por defecto. Esto asegura que el padding se incluya dentro del ancho o alto del elemento cuando se le asigna un tamaño fijo.
Margins
Para separar items de manera independiente, utilizamos margins.
| Breakpoint | Left | Right | Bottom | Top | Inline (X) | Block (Y) | Global (XY) |
| Mobile | ml: | mr: | mb: | mt: | mx: | my: | m: |
| Tablet | md-ml: | md-mr: | md-mb: | md-mt: | md-mx: | md-my: | md-m: |
| Desktop | lg-ml: | lg-mr: | lg-mb: | lg-mt: | lg-mx: | lg-my: | lg-m: |
Gaps
Para separar items de manera homogénea, utilizamos Gaps. Para que las clases utilitarias funcionen, el contenedor debe tener la propiedad flex o grid. A diferencia de los Paddings y margins, el gap se aplica directamente en el contenedor padre.
| Breakpoint | Gap |
| Mobile | gap: |
| Tablet | md-gap: |
| Desktop | lg-gap: |