Allow users to customize margins between cells

[wasimxyz]

Description

I'm working on a notebook with 25+ different UI components (think dashboard with filter controls and plots), and it can be overwhelming to look at with marimo's default margins.

The mo.hstack and mo.vstack elements allow you to set gaps between elements, which is nice, but the gaps between cells can't be customized. This makes for somewhat of an awkward layout in the "App" view.

Suggested solution

If not a user setting, it would be nice to provide some CSS variables that allow the user to increase / decrease the gaps between cells.

Are you willing to submit a PR?

• Yes

Alternatives

I can put all of my UI elements in a mo.vstack and set the gap there. This is what I'm doing now, but this is less ideal for the "Edit" view. It means I have to scroll up and down to edit the code in one cell before checking the output in another cell.

Additional context

No response

[mscolnick]

we could definitely add a new css variable called --notebook-cell-gap and default it to the current one. would appreciate the contribution (and one-line doc to css vars) if you are open to it