Générateur d'espacement fluide avec clamp()
Calculez une véritable valeur CSS clamp() fluide à partir d'une taille min et d'une taille max sur deux largeurs de viewport, avec la pente et l'intersection détaillées pas à pas et un aperçu de redimensionnement en direct.
Entièrement traité dans votre navigateur — rien de ce que vous saisissez ici n'est jamais téléchargé.
Résultat
À propos de cet outil
CSS clamp() fonctionne exactement de la même manière pour l'espacement que pour la taille de police — la propriété concernée est simplement margin, padding ou gap au lieu de font-size. Cette page ouvre le calculateur avec une plage de 8px à 32px sur un viewport de 320px à 1280px, un échelonnement courant pour le padding de section ou les espacements de carte qui doivent paraître serrés sur un téléphone et aérés sur un bureau, sans aucune media query en vue.
Les mathématiques sous-jacentes ne se préoccupent pas de ce que les nombres représentent : la même formule de pente et d'intersection avec l'axe des ordonnées qui produit une taille de titre fluide produit une valeur d'espacement fluide, de sorte que le détail ci-dessous montre exactement comment 8px et 32px se transforment en une ligne clamp() prête à copier pour le padding : clamp(...).
Faites glisser le curseur de largeur de viewport pour prévisualiser la sensation de l'espacement à n'importe quelle largeur entre les deux points d'arrêt, ajustez les valeurs min et max pour une plage plus serrée ou plus lâche, et copiez la ligne finale directement dans la propriété d'espacement qui en a besoin.