Pourquoi rendre les espacements fluides
Un blanc généreux donne de la sérénité à une mise en page sur ordinateur, mais le même padding de section de 96px gaspille un tiers de l’écran d’un mobile. Les breakpoints fixes corrigent cela par paliers et laissent souvent les tablettes avec des espacements trop serrés ou trop lâches. Une valeur fluide grandit en continu : chaque écran reçoit un espace proportionnel à sa largeur, et vous écrivez une déclaration au lieu de trois.
Les mêmes maths que la typographie fluide
Les espacements utilisent exactement la même formule linéaire que les tailles de police : un minimum, un maximum et une droite entre deux largeurs de viewport. La différence tient aux valeurs choisies. Les espacements augmentent souvent d’un facteur plus grand que le texte – passer de 24px à 64px de padding de section est courant – car le blanc n’a pas à rester lisible. L’avertissement WCAG de 2,5× ne s’applique pas aux espacements, mais il s’affiche comme rappel au cas où vous réutiliseriez la valeur pour du texte.
Construire une échelle d’espacements
Pour un système cohérent, définissez quelques tokens d’espacement fluides comme --space-s, --space-m et --space-l, chacun avec son minimum et son maximum. Les petits servent aux écarts à l’intérieur des composants, les moyens au padding des cartes et les grands entre les sections de la page. Associez-les à une échelle typographique fluide sur la même plage de viewport pour que texte et espace grandissent au même rythme.
Dans Tailwind, appliquez le résultat comme valeur arbitraire, par exemple p-[clamp(…)], gap-[clamp(…)] ou my-[clamp(…)]. Le calculateur fournit une classe prête à l’emploi avec des tirets bas à la place des espaces, ce qui correspond à la façon dont Tailwind attend les espaces dans les valeurs arbitraires.
Conseils
Gardez aussi les espacements en rem pour qu’ils respectent, avec le texte, les réglages de police de l’utilisateur. Évitez les valeurs fluides pour les bordures et filets fins, où les fractions de pixel peuvent paraître floues. Vérifiez l’aperçu à 320px pour vous assurer que le padding laisse assez de place au contenu.