Hoppa till innehåll

CSS Calc Playground

Testa och förhandsvisa CSS calc()-uttryck i realtid. Experimentera med blandade enheter som px, %, rem, vw. Se det beräknade resultatet live. Kopiera CSS-kod. Gratis onlineverktyg.

320px 2560px
Exempel
Förhandsvisning
CSS-utdata
 

Vad är CSS calc()?

CSS-funktionen calc() låter dig utföra beräkningar när du anger CSS-egenskapsvärden. Den är särskilt användbar för att blanda olika enheter, som procent och pixlar.

Stödda enheter

Du kan blanda alla CSS-längdenheter inuti calc(): px, %, em, rem, vw, vh, vmin, vmax och mer. Operatorerna +, -, *, / stöds.

Vanliga mönster

calc(100% - 2rem) — full bredd minus fast utfyllnad. calc(100vh - 80px) — viewport-höjd minus sidhuvud. calc(50% + 1rem) — halv bredd plus förskjutning. calc(100% / 3) — en tredjedel av behållaren.

Integritet

All calc()-testning körs 100 % i din webbläsare. Ingen data skickas till någon server.