mirror of
https://github.com/Textualize/textual.git
synced 2025-10-17 02:38:12 +03:00
Co-authored-by: Rodrigo Girão Serrão <5621605+rodrigogiraoserrao@users.noreply.github.com>
1.3 KiB
1.3 KiB
Margin
The margin rule adds space around the entire widget. Margin may be specified with 1, 2 or 4 values.
| example | |
|---|---|
margin: 1; |
A single value sets a margin of 1 around all 4 edges |
margin: 1 2; |
Two values sets the margin for the top/bottom and left/right edges |
margin: 1 2 3 4; |
Four values sets top, right, bottom, and left margins independently |
Margin may also be set individually by setting margin-top, margin-right, margin-bottom, or margin-left to an single value.
Syntax
margin: <INTEGER>;
margin: <INTEGER> <INTEGER>;
margin: <INTEGER> <INTEGER> <INTEGER> <INTEGER>;
Example
In this example we add a large margin to some static text.
=== "margin.py"
```python
--8<-- "docs/examples/styles/margin.py"
```
=== "margin.css"
```css
--8<-- "docs/examples/styles/margin.css"
```
=== "Output"
```{.textual path="docs/examples/styles/margin.py"}
```
CSS
/* Set margin of 2 on the top and bottom edges, and 4 on the left and right */
margin: 2 4;
Python
# In Python you can set the margin as a tuple of integers
widget.styles.margin = (2, 3)