`textual` is a terminal UI (TUI) library, but it uses a variant of HTML and CSS to style elements. But not all styles are supported, and the variant is slightly different than actual CSS. Here are the styles that affect position (as well as some which affect size, since size will implicitly affect the position based on the anchor):

- [`align (left | center | right) (top | center | bottom)`](https://textual.textualize.io/styles/align/): aligns children within a container
- [`border-title-align: left | center | right`](https://textual.textualize.io/styles/border_title_align/): sets the horizontal alignment for the border title
- [`box-sizing: border-box | content-box`](https://textual.textualize.io/styles/box_sizing/): determines how the width and height of a widget are calculated.
- [`content-align: left | center | right`](https://textual.textualize.io/styles/content_align/): aligns content inside a widget
- [`display: block | none`](https://textual.textualize.io/styles/display/): defines whether a widget is displayed or not
- [`dock: bottom | left | right | top`](https://textual.textualize.io/styles/dock/): fixes a widget to the edge of a container (which may be the entire terminal window).
- [`width: <scalar>`](https://textual.textualize.io/styles/width/): sets a widget's width
- [`height: <scalar>`](https://textual.textualize.io/styles/height/): sets a widget's height
- [`layer: <name>`](https://textual.textualize.io/styles/layer/): defines the layer a widget belongs to, which affects the z-position (i.e. which elements are above / below others). This must be used in conjunction with `layers`
- [`layers: <name>+`](https://textual.textualize.io/styles/layers/): defines an ordered set of layers for children to reference in their `layer` tags
- [`layout: grid | horizontal | vertical`](https://textual.textualize.io/styles/layout/): defines how a widget arranges its children
- [`max-height: <scalar>`](https://textual.textualize.io/styles/max_height/): sets a widget's maximum height
- [`max-width: <scalar>`](https://textual.textualize.io/styles/max_width/): sets a widget's maximum width
- [`min-height: <scalar>`](https://textual.textualize.io/styles/min_height/): sets a widget's minimum height
- [`min-width: <scalar>`](https://textual.textualize.io/styles/min_width/): sets a widget's minimum width
- [`offset: <scalar> <scalar>`](https://textual.textualize.io/styles/offset/): defines an offset (x and y) for the position of the widget
- [`text-align: left | right | start | center | end | justify`](https://textual.textualize.io/styles/text_align/): sets the text alignment in a widget.

The [`margin`](https://textual.textualize.io/styles/margin/) style specifies spacing around *a widget itself*

```css
margin: <integer>
      # one value for all edges
      | <integer> <integer>
      # top/bot   left/right
      | <integer> <integer> <integer> <integer>;
      # top       right     bot       left

margin-top: <integer>;
margin-right: <integer>;
margin-bottom: <integer>;
margin-left: <integer>;
```

The [`padding`](https://textual.textualize.io/styles/margin/) style specifies spacing around *content inside a widget*

```css
padding: <integer> # one value for all edges
       | <integer> <integer>
       # top/bot   left/right
       | <integer> <integer> <integer> <integer>;
       # top       right     bot       left

padding-top: <integer>;
padding-right: <integer>;
padding-bottom: <integer>;
padding-left: <integer>;
```

There are also multiple styles relating to [grid layout](https://textual.textualize.io/styles/grid/):

```css
column-span: <integer>;
grid-columns: <scalar>+;
grid-gutter: <scalar> [<scalar>];
grid-rows: <scalar>+;
grid-size: <integer> [<integer>];
row-span: <integer>;
```

For more info, read the docs: https://textual.textualize.io/styles
spam fails_task lang_mismatch pii not_appropriate hate_speech sexual_content quality toxicity humor helpfulness creativity violence