# Sized Box

The **Sized Box** is a simple, invisible widget that creates a box with a specific width and height. Its primary purpose is to add fixed-size gaps or spacing within layouts.

{% embed url="<https://youtu.be/AfcFB7VpHgc?si=rzegOV-PMqbYAyWf>" %}

Watch this on Youtube: <https://www.youtube.com/watch?v=AfcFB7VpHgc>

### Core Concept: Creating Space

Think of the Sized Box as a rigid, empty spacer. While other widgets like `Container` can have padding and margins, the Sized Box has only one job: to occupy a precise amount of space. This makes it the most efficient and straightforward way to add gaps between widgets in a `Column` or `Row`.

* In a `Column`, a Sized Box with a `Height` creates vertical space.
* In a `Row`, a Sized Box with a `Width` creates horizontal space.

<figure><img src="/files/oRWyLuVlTXei4429W2L7" alt="A diagram showing a Sized Box creating vertical space in a Column and horizontal space in a Row."><figcaption><p>Using a Sized Box to add vertical space in a Column and horizontal space in a Row.</p></figcaption></figure>

### Properties

<table><thead><tr><th width="176.25390625">Property</th><th>Description</th></tr></thead><tbody><tr><td><code>Width</code></td><td>The width of the box. Can be a fixed value in pixels (px).</td></tr><tr><td><code>Height</code></td><td>The height of the box. Can be a fixed value in pixels (px).</td></tr></tbody></table>

***

### Default Properties

The Sized Box is a highly specialized layout widget. Its core properties (`Width` and `Height`) define its entire function, so it does not use the standard Default Properties for styling (like `Background Color` or `Border`).

### Use Cases

The **Sized Box** widget is mainly for **spacing and fixed size**.

Use **Sized Box** when you want to:

* Add **space** between widgets
  * Vertical gap between texts, buttons, sections
  * Horizontal gap between icons or buttons in a row
* Give a widget a **fixed width/height**
  * Make icons, images, or custom widgets a consistent size
  * Create a fixed square or rectangle area
* Create an **empty placeholder**
  * Reserve space for content that may appear later
  * Keep layout alignment even when something is hidden


---

# Agent Instructions: Querying This Documentation

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

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.digia.tech/ui-building-blocks/widgets/layout-structure-widgets/sized-box.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
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.