textual/docs/styles/offset.md

Offset

The offset rule adds an offset to the widget's position. The offset is given as two values.

Coordinates may be specified individually with offset-x and offset-y.

Syntax

offset: <SCALAR> <SCALAR>;

Example

In this example, we have 3 widgets with differing offsets.

=== "offset.py"

```python
--8<-- "docs/examples/styles/offset.py"
```

=== "offset.css"

```css
--8<-- "docs/examples/styles/offset.css"
```

=== "Output"

```{.textual path="docs/examples/styles/offset.py"}
```

CSS

/* Move the widget 2 cells in the x direction, and 4 in the y direction. */
offset: 2 4;

Python

# Move the widget 2 cells in the x direction, and 4 in the y direction.
widget.styles.offset = (2, 4)