> For the complete documentation index, see [llms.txt](https://staylime.com/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://staylime.com/docs/volume-themes/sections/layout/empty-space-and-line.md).

# Empty Space & Line

Add breathing room between sections or draw a divider, without touching CSS.

A page built from stacked sections tends to read as one continuous block: everything sits equally close to everything else, so nothing stands out. These two sections are how you give a page rhythm. **Empty space** opens a gap, **Line** draws a horizontal rule. Neither adds content, and both do more for how a homepage scans than most styling settings.

{% hint style="info" %}
**At a glance**

| Where to find it | **Add section → Layout**                                                 |
| ---------------- | ------------------------------------------------------------------------ |
| Two sections     | Empty space (a gap) · Line (a horizontal rule)                           |
| Allowed on       | Line: any template, plus header and footer · Empty space: templates only |
| Content          | Neither section adds any — they only shape the page                      |
| {% endhint %}    |                                                                          |

***

### How to add

{% stepper %}
{% step %}

### Add the section

In **Add section → Layout** they're listed as **Empty space** and **Line**. **Line** can also be added inside the header and footer section groups; **Empty space** is available on page templates only.
{% endstep %}

{% step %}

### Drag it into place

Move the section to sit between the two sections you want separated. Both take effect immediately in the editor preview.
{% endstep %}

{% step %}

### Set the size

For **Empty space**, set **Height** — a multiplier from 0 to 4 in 0.5 steps. For **Line**, decide whether **Make full-width** is on, and set the **Top** and **Bottom** spacing around it.
{% endstep %}

{% step %}

### Check the color scheme

Both sections take their background, and the line's color, from **Color scheme**. Where two neighbouring sections use different backgrounds, this decides which one the gap belongs to.
{% endstep %}
{% endstepper %}

{% hint style="warning" %}
**Height is a multiplier, not a pixel value.** It multiplies the theme's own section padding, so the gap shrinks along with the rest of the layout on smaller screens instead of staying stubbornly tall on a phone. A **Height** of 0 collapses the section to nothing — handy when you want to keep it in place but temporarily remove the gap.
{% endhint %}

{% hint style="success" icon="lightbulb" %}

### Good to know

* **Empty space has a Color scheme of its own.** Where two neighbouring sections use different backgrounds, that setting decides which one the gap belongs to.
* **Line has no thickness or color setting.** The rule takes its color from the section's **Color scheme**.
* **Make full-width on Line removes the side margins** so the rule runs edge to edge. Leave it off and the line stays within the grid.
* **Disable grid max-width can already be in effect without you enabling it:** if Theme settings make the chosen grid full-width, the Line section follows that automatically.
  {% endhint %}

### Customization ideas

<details>

<summary><strong>Separate two sections that share a background</strong></summary>

Put a Line between a banner and a product row using the same color — it separates them without introducing a second color scheme.

</details>

<details>

<summary><strong>A colored band above the footer</strong></summary>

Stack an Empty space with a distinct color scheme directly above the footer. It reads as a deliberate break rather than leftover space.

</details>

<details>

<summary><strong>Build a spacing system</strong></summary>

Use **Height** 0.5 between tightly related sections and 2 before a new topic. Consistent small and large gaps do the work of headings without adding any text.

</details>

<details>

<summary><strong>Frame a full-width banner</strong></summary>

A full-width Line directly under a full-width banner makes the banner feel framed rather than floating.

</details>

***

### Settings reference

<details>

<summary>Empty space — settings</summary>

| Setting          | What it does                                                               |
| ---------------- | -------------------------------------------------------------------------- |
| **Height**       | Gap height as a multiple of the theme's section padding, 0–4 in 0.5 steps. |
| **Color scheme** | Background color of the gap.                                               |

</details>

<details>

<summary>Line — settings</summary>

| Setting                    | What it does                                                         |
| -------------------------- | -------------------------------------------------------------------- |
| **Grid**                   | Which grid the line sits in: Page, Alternative, Secondary or Custom. |
| **Max width**              | 1040–2560 px. Visible only with Grid set to Custom.                  |
| **Disable grid max-width** | Lets the line stretch past the grid's maximum width.                 |
| **Make full-width**        | Removes the side margins so the line runs edge to edge.              |
| **Color scheme**           | Determines the line's color.                                         |
| **Top** / **Bottom**       | Spacing above and below, 0–2×.                                       |

</details>

### Best practices

* **Pick two or three spacing values and reuse them down the page.** Ten slightly different gaps look like a mistake; two deliberate ones look like a system.
* **Don't use Empty space to compensate for a section that's already too tall** — reduce that section's own **Bottom** spacing instead, or the page keeps growing on every screen size.
* **A line between every pair of sections stops being a separator.** Use one where the content genuinely changes subject.

## Related

* [Custom HTML & Custom Liquid](/docs/volume-themes/sections/layout/custom-html-and-custom-liquid.md)
* [Anchor Link](/docs/volume-themes/sections/layout/anchor-link.md)


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://staylime.com/docs/volume-themes/sections/layout/empty-space-and-line.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.