Run ❯
Get your
own
website
❯
Run Code
Ctrl+Alt+R
Change Orientation
Ctrl+Alt+O
Change Theme
Ctrl+Alt+D
Go to Spaces
Ctrl+Alt+P
HTML
CSS
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="styles.css" type="text/css"> </head> <body> <article class="card"> <h1>Fluid Spacing</h1> <p>Spacing adapts between viewports using clamp() and custom properties.</p> </article> </body> </html>
:root { --space-xs: clamp(0.5rem, 1vw, 0.75rem); --space-sm: clamp(0.75rem, 1.5vw, 1.125rem); --space-lg: clamp(1.5rem, 3vw, 2.5rem); } body { font-family: "Inter" , sans-serif; margin: 0; padding: var(--space-lg); background: #f8fafc; } .card { padding: var(--space-lg); margin-block: var(--space-sm); border-radius: calc(var(--space-xs) * 2); background: #fff; box-shadow: 0 12px 30px rgba(15,23,42,0.12); }
