Fluid Spacing Clamp() Generator
Beregn en rigtig flydende CSS-clamp()-værdi ud fra en min og maks. størrelse på tværs af to viewport-bredder, med hældningen og skæringspunktet vist trin for trin og en live-forhåndsvisning af størrelsen.
Resultat
CSS clamp() fungerer på nøjagtig samme måde for mellemrum, som det gør for skriftstørrelse - egenskaben er tilfældigvis margin, polstring eller mellemrum i stedet for font-size. Denne side åbner lommeregneren med et interval på 8px til 32px på tværs af en 320px til 1280px viewport, et almindeligt trin for sektionsopfyldning eller korthuller, der skal føles tæt på en telefon og rummelig på en desktop uden en medieforespørgsel i syne.
Den underliggende matematik er ligeglad med, hvad tallene repræsenterer: den samme hældning og y-akse-skæringsformel, der producerer en flydende overskriftsstørrelse, producerer en væskeafstandsværdi, så opdelingen nedenfor viser præcis, hvordan 8px og 32px bliver til en kopiklar clamp()-linje til polstring: clamp(...).
Træk skyderen til visningsportens bredde for at få vist, hvordan afstanden ville føles i enhver bredde mellem de to brudpunkter, juster min- og maksværdierne for et snævrere eller løsere område, og kopier den færdige linje direkte ind i den mellemrumsegenskab, der har brug for det.