alihan/textual
1
0
Fork 0
mirror of https://github.com/Textualize/textual.git synced 2025-10-17 02:38:12 +03:00
Code Issues Packages Projects Releases Wiki Activity

Complete margin reference.

Browse Source
This commit is contained in:
Rodrigo Girão Serrão
2022-12-21 16:49:44 +00:00
parent e789c9c006
commit 6a07f30094
1 changed files with 56 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
docs/styles/margin.md
View File

@@ -3,24 +3,36 @@
The `margin` rule adds space around the entire widget. Margin may be specified with 1, 2 or 4 values. The `margin` rule adds space around the entire widget. Margin may be specified with 1, 2 or 4 values.
| Example | Description | | Example | Description |
|--------------------|---------------------------------------------------------------------| |--------------------|----------------------------------------------------------------------|
| `margin: 1;` | A single value sets a margin of 1 around all 4 edges | | `margin: 1;` | A single value sets the margin around all 4 edges. |
| `margin: 1 2;` | Two values sets the margin for the top/bottom and left/right 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: 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 a single value. Margin may also be set individually by setting `margin-top`, `margin-right`, `margin-bottom`, or `margin-left` to a single value.
## Syntax ## Syntax
``` ```
margin: <INTEGER>; margin: <INTEGER>; /* Same value for the 4 edges. */
margin: <INTEGER> <INTEGER>; margin: <INTEGER> <INTEGER>;
/* top/bot, left/right */
margin: <INTEGER> <INTEGER> <INTEGER> <INTEGER>; margin: <INTEGER> <INTEGER> <INTEGER> <INTEGER>;
/* top, right, bottom, left */
margin-top: <INTEGER>;
margin-right: <INTEGER>;
margin-bottom: <INTEGER>;
margin-left: <INTEGER>;
``` ```
## Example ## Examples
In this example we add a large margin to some static text. 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" === "margin.py"
@@ -34,21 +46,54 @@ In this example we add a large margin to some static text.
--8<-- "docs/examples/styles/margin.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" === "Output"
```{.textual path="docs/examples/styles/margin.py"} ```{.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 ## CSS
```sass ```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 */ /* Set margin of 2 on the top and bottom edges, and 4 on the left and right */
margin: 2 4; 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 ## 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 ```python
# In Python you can set the margin as a tuple of integers # Set margin of 1 around all edges
widget.styles.margin = (2, 3) 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)
``` ```