---
title: "Spacing"
description: "Clover uses spacing determined by the golden ratio, from your page's 1rem. Try the scale live, see which space goes where, and size the Body."
url: https://clover.iiif.library.northwestern.edu/docs/styling/spacing
version: "4"
---

# Spacing

Clover uses spacing determined by the [golden ratio](https://en.wikipedia.org/wiki/Golden_ratio), from your page’s `1rem`. The more closely two things belong together, the smaller the space between them.

## The scale

Each space is φ, about 1.618, times the one below it, and `m` is your page’s [`1rem`](https://clover.iiif.library.northwestern.edu/docs/styling/fonts#your-pages-size). The same scale sets margins, paddings, gaps and [text sizes](https://clover.iiif.library.northwestern.edu/docs/styling/fonts#text-sizes). Every space is a [custom property](https://clover.iiif.library.northwestern.edu/docs/styling/variables#sizes-and-spaces): set one on `:root`, and everything that uses it follows.

Change your `1rem` in the table. Every space follows, and so does the Viewer above it.

[Clover's Viewer, its 1rem the size set below](https://clover.iiif.library.northwestern.edu/test/viewer?r=catalog)

| Variable                | Size     | At 16px | What it sizes                                                      |
| ----------------------- | -------- | ------- | ------------------------------------------------------------------ |
| Your page               |          |         |                                                                    |
| HTML page               | 1rem     | 16px    | Your page’s root `font-size`                                       |
| Spaces                  |          |         |                                                                    |
| `--clover-space-3xs`    | 0.146rem | 2.3px   | φ⁻⁴                                                                |
| `--clover-space-2xs`    | 0.236rem | 3.8px   | φ⁻³                                                                |
| `--clover-space-xs`     | 0.382rem | 6.1px   | φ⁻²: a thumbnail over its label                                    |
| `--clover-space-s`      | 0.618rem | 9.9px   | φ⁻¹: within a component                                            |
| `--clover-space-m`      | 1rem     | 16px    | Your `1rem`: between components in a region                        |
| `--clover-space-l`      | 1.618rem | 25.9px  | φ: a region’s inset                                                |
| `--clover-space-xl`     | 2.618rem | 41.9px  | φ²                                                                 |
| `--clover-space-2xl`    | 4.236rem | 67.8px  | φ³                                                                 |
| Controls and components |          |         |                                                                    |
| `--clover-control`      | 2.236rem | 35.8px  | Every round control, wide and high                                 |
| `--clover-inset`        | 1.618rem | 25.9px  | A region’s inset, from its edge to its components                  |
| `--clover-radius-pill`  | 2rem     | 32px    | Fully rounded corners, as on the round controls and Search’s field |
| `--clover-items-height` | 8rem     | 128px   | The pictures in Items’ slider                                      |
| `--clover-items-size`   | 10rem    | 160px   | A cell of Items’ grid                                              |
| `--clover-map-height`   | 24rem    | 384px   | The Map                                                            |

## Which space goes where

A region, such as a template’s header, its thumbnail strip or the Panel, keeps [`--clover-inset`](https://clover.iiif.library.northwestern.edu/docs/styling/variables#sizes-and-spaces) (`l`) between its edge and the components in it. Inside, the closer things belong, the smaller the space: `m` between components (`s` along Default’s header and Document’s toolbar, `l` under the Gallery’s header), `s` within a component, and `xs` between a thumbnail and its label.

Set `--clover-inset` to make a layout tighter or roomier:

```css
.my-layout {
  --clover-inset: var(--clover-space-m);
}
```

## The Body

The Body is [`--clover-body-height`](https://clover.iiif.library.northwestern.edu/docs/styling/variables#the-body) tall: `60vh`, or its template’s own. Set yours around a Body you compose, or on `.clover-template-default`:

```css
.my-layout {
  --clover-body-height: 70vh;
}
```

In Document, the Body fills its page: size Document with [`--clover-template-document-height`](https://clover.iiif.library.northwestern.edu/docs/styling/variables#templates).

At home, the picture fills the Body edge to edge, except in Document, which keeps `--clover-inset` around it. The Body’s controls sit `--clover-inset` in from its edges, in line with the components around the Body. To change either, set `--clover-canvas-inset` or `--clover-canvas-controls-inset` on [`.clover-canvas`](https://clover.iiif.library.northwestern.edu/docs/styling/classes#classes-and-states) itself.

On a screen under 31rem wide, such as a phone’s, the controls sit `m` in, and so do the Panel, Default’s header and thumbnail strip, and Document’s toolbar.