Helpers de espaciado y separación

Los helpers de margen y relleno de POM comparten una escala compacta en rem. El sufijo es un token, no un número de píxeles:

Sufijo Valor Con la raíz de 15px del tema
0 0 0px
0375 0.375rem 5.625px
075 0.75rem 11.25px
1 1rem 15px
125 1.25rem 18.75px
2 2rem 30px
3 3rem 45px
4 4rem 60px
6 6rem 90px
8 8rem 120px

Sintaxis:

  • m: margen en todos los lados;
  • mt, mr, mb, ml: margen en un solo lado;
  • p: relleno en todos los lados;
  • pt, pr, pb, pl: relleno en un solo lado;
  • mauto: márgenes izquierdo y derecho automáticos.

Ejemplos:

<section class="pt-125 pb-125">…</section>
<div class="mb-2">…</div>
<div class="mauto">…</div>

Los 100 helpers numéricos usan !important. Los helpers específicos por lado siguen a los helpers de todos los lados en la hoja de estilos, de modo que p-2 pt-0 conserva un relleno superior de cero. mauto mantiene los márgenes horizontales automáticos sin !important.

El tema no genera ejes x ni y, variantes negativas, variantes por punto de ruptura ni variantes de margen automático distintas de mauto. En particular, mr-auto no se proporciona. Usa CSS de componentes o los controles de diseño adaptable del generador para valores fuera de esta escala. Cambiar el tamaño de fuente raíz escala los helpers en rem; cambiar solo el tamaño de fuente de un párrafo o del cuerpo no lo hace.

Los helpers anteriores con nombre en píxeles se han eliminado, no se han creado alias. Migra las plantillas almacenadas y los atributos de clase de shortcode heredados con el comando de migración de helpers de espaciado. Las declaraciones de relleno/margen arbitrarias y los valores adaptables del Page Builder permanecen sin cambios.

Los elementos espaciadores dedicados usan una escala compacta en rem:

Helper Altura
.web-gap-075 0.75rem
.web-gap-125 1.25rem
.web-gap-2 2rem
.web-gap-3 3rem
.web-gap-4 4rem
.web-gap-8 8rem
.web-gap-12 12rem

El sufijo identifica el valor en rem, no los píxeles. Los helpers anteriores .web-gap y .web-gap-10 hasta .web-gap-60 quedan retirados. Actualiza el contenido almacenado existente con la migración de helpers de separación documentada.

Elige un único propietario para cada límite. Si un componente ya aporta su margen exterior, no añadas un margen igual al componente adyacente salvo que la separación combinada sea intencionada. Prefiere el relleno cuando el fondo o la zona clicable deba extenderse a través del espacio; prefiere el margen para la separación fuera del componente.

Prefiere los controles de espaciado adaptable para los diseños específicos de cada dispositivo y los helpers en rem para el espaciado reutilizable de plantillas. Los bloques de texto de Gutenberg ofrecen los mismos ajustes preestablecidos de margen superior e inferior y los previsualizan a un tamaño equivalente a la raíz del tema sin cambiar el tamaño de fuente de la administración de WordPress.