mirror of
https://github.com/Textualize/textual.git
synced 2025-10-17 02:38:12 +03:00
111 lines
3.4 KiB
Markdown
111 lines
3.4 KiB
Markdown
# Margin
|
|
|
|
The `margin` rule specifies spacing around a widget.
|
|
|
|
## Syntax
|
|
|
|
--8<-- "docs/snippets/syntax_block_start.md"
|
|
margin: <a href="../../css_types/integer"><integer></a>
|
|
# one value for all edges
|
|
| <a href="../../css_types/integer"><integer></a> <a href="../../css_types/integer"><integer></a>
|
|
# top/bot left/right
|
|
| <a href="../../css_types/integer"><integer></a> <a href="../../css_types/integer"><integer></a> <a href="../../css_types/integer"><integer></a> <a href="../../css_types/integer"><integer></a>;
|
|
# top right bot left
|
|
|
|
margin-top: <a href="../../css_types/integer"><integer></a>;
|
|
margin-right: <a href="../../css_types/integer"><integer></a>;
|
|
margin-bottom: <a href="../../css_types/integer"><integer></a>;
|
|
margin-left: <a href="../../css_types/integer"><integer></a>;
|
|
--8<-- "docs/snippets/syntax_block_end.md"
|
|
|
|
The `margin` specifies spacing around the four edges of the widget equal to the [`<integer>`](../../css_types/integer) specified.
|
|
The number of values given defines what edges get what margin:
|
|
|
|
- 1 [`<integer>`](../../css_types/integer) sets the same margin for the four edges of the widget;
|
|
- 2 [`<integer>`](../../css_types/integer) set margin for top/bottom and left/right edges, respectively.
|
|
- 4 [`<integer>`](../../css_types/integer) set margin for the top, right, bottom, and left edges, respectively.
|
|
|
|
!!! tip
|
|
|
|
To remember the order of the edges affected by the rule `margin` when it has 4 values, think of a clock.
|
|
Its hand starts at the top and the goes clockwise: top, right, bottom, left.
|
|
|
|
Alternatively, margin can be set for each edge individually through the rules `margin-top`, `margin-right`, `margin-bottom`, and `margin-left`, respectively.
|
|
|
|
### Values
|
|
|
|
--8<-- "docs/snippets/type_syntax/integer.md"
|
|
|
|
## Examples
|
|
|
|
In the example below we add a large margin to a label, which makes it move away from the top-left corner of the screen.
|
|
|
|
=== "Output"
|
|
|
|
```{.textual path="docs/examples/styles/margin.py"}
|
|
```
|
|
|
|
=== "margin.py"
|
|
|
|
```python
|
|
--8<-- "docs/examples/styles/margin.py"
|
|
```
|
|
|
|
=== "margin.css"
|
|
|
|
```css
|
|
--8<-- "docs/examples/styles/margin.css"
|
|
```
|
|
|
|
The next example shows a grid.
|
|
In each cell, we have a placeholder that has its margins set in different ways.
|
|
|
|
=== "Output"
|
|
|
|
```{.textual path="docs/examples/styles/margin_all.py"}
|
|
```
|
|
|
|
=== "margin_all.py"
|
|
|
|
```py
|
|
--8<-- "docs/examples/styles/margin_all.py"
|
|
```
|
|
|
|
=== "margin_all.css"
|
|
|
|
```py
|
|
--8<-- "docs/examples/styles/margin_all.css"
|
|
```
|
|
|
|
## CSS
|
|
|
|
```sass
|
|
/* Set margin of 1 around all edges */
|
|
margin: 1
|
|
/* Set margin of 2 on the top and bottom edges, and 4 on the left and right */
|
|
margin: 2 4;
|
|
/* Set margin of 1 on the top, 2 on the right,
|
|
3 on the bottom, and 4 on the left */
|
|
margin: 1 2 3 4;
|
|
|
|
margin-top: 1;
|
|
margin-right: 2;
|
|
margin-bottom: 3;
|
|
margin-left: 4;
|
|
```
|
|
|
|
## Python
|
|
|
|
In Python, you cannot set any of the individual `margin` rules `margin-top`, `margin-right`, `margin-bottom`, and `margin-left`.
|
|
|
|
However, you _can_ set margin to a single integer, a tuple of 2 integers, or a tuple of 4 integers:
|
|
|
|
```python
|
|
# Set margin of 1 around all edges
|
|
widget.styles.margin = 1
|
|
# Set margin of 2 on the top and bottom edges, and 4 on the left and right
|
|
widget.styles.margin = (2, 4)
|
|
# Set margin of 1 on top, 2 on the right, 3 on the bottom, and 4 on the left
|
|
widget.styles.margin = (1, 2, 3, 4)
|
|
```
|