Vloeiende witruimte clamp()-generator
Bereken een echte vloeiende CSS clamp()-waarde vanuit een minimale en maximale grootte over twee viewport-breedtes, met de helling en het snijpunt stap voor stap getoond en een live resize-preview.
Wordt volledig in uw browser verwerkt. Niets wat u hier invoert, wordt ooit geüpload.
Resultaat
Over dit hulpmiddel
CSS clamp() werkt voor witruimte precies hetzelfde als voor de lettergrootte — de eigenschap is alleen toevallig margin, padding of gap in plaats van font-size. Deze pagina opent de calculator met een 8px-tot-32px-bereik voor een viewport van 320px tot 1280px, een veelgebruikte stap voor sectiepadding of kaartgaps die krap aan moeten voelen op telefoons en ruim op desktop, zonder dat er een media query aan te pas komt.
De onderliggende wiskunde trekt zich niets aan van wat de getallen voorstellen: dezelfde helling- en y-as-snijpunt-formule die een vloeiende kopgrootte oplevert, levert ook een vloeiende witruimtewaarde op, dus de onderstaande uitsplitsing laat precies zien hoe 8px en 32px een kant-en-klare clamp()-regel voor padding: clamp(...) opleveren.
Versleep de viewport-breedteschuifregelaar om te bekijken hoe de witruimte zou aanvoelen op elke breedte tussen de twee breekpunten, pas de minimale en maximale waarden aan voor een krapper of losser bereik, en kopieer de voltooide regel rechtstreeks naar de witruimte-eigenschap die hem nodig heeft.