Hopp til innhold

CSS Calc Playground

Test og forhåndsvis CSS calc()-uttrykk i sanntid. Eksperimenter med blandede enheter som px, %, rem, vw. Se det beregnede resultatet live. Kopier CSS-kode. Gratis nettverktøy.

320px 2560px
Eksempler
Forhåndsvisning
CSS-utdata
 

Hva er CSS calc()?

CSS-funksjonen calc() lar deg utføre beregninger når du spesifiserer CSS-egenskapsverdier. Den er spesielt nyttig for å blande forskjellige enheter, som prosenter og piksler.

Støttede enheter

Du kan blande alle CSS-lengdeenheter inne i calc(): px, %, em, rem, vw, vh, vmin, vmax og mer. Operatorene +, -, *, / støttes.

Vanlige mønstre

calc(100% - 2rem) — full bredde minus fast polstring. calc(100vh - 80px) — viewport-høyde minus header. calc(50% + 1rem) — halv bredde pluss forskyvning. calc(100% / 3) — en tredjedel av beholderen.

Personvern

All calc()-testing kjøres 100 % i nettleseren din. Ingen data sendes til noen server.