This commit is contained in:
Will McGugan
2022-08-04 17:03:44 +01:00
parent 676c8aecb7
commit 396036635a
2 changed files with 13 additions and 9 deletions

View File

@@ -1,12 +1,14 @@
# Margin
The `margin` rule adds space around the entire widget.
The `margin` rule adds space around the entire widget. Margin may be specified with 1, 2 or 4 values.
- `margin: 1;` Sets a margin of 1 around all 4 edges
- `margin: 1 2;` Sets a margin of 1 on the top and bottom edges, and a margin of 2 on the left and right edges
- `margin: 1 2 3 4;` Sets a margin of one on the top edge, 2 on the right, 3 on the bottom, and 4 on the left.
| 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, following the same pattern as above, by setting `margin-top`, `margin-right`, `margin-bottom`, or `margin-left`.
Margin may also be set individually by setting `margin-top`, `margin-right`, `margin-bottom`, or `margin-left` to an single value.
## Example

View File

@@ -2,11 +2,13 @@
The padding rule adds space around the content of a widget. You can specify padding with 1, 2 or 4 numbers.
- `padding: 1;` Sets a padding of 1 around all 4 edges
- `padding: 1 2;` Sets a padding of 1 on the top and bottom edges, and a padding of two on the left and right edges
- `padding: 1 2 3 4;` Sets a padding of one on the top edge, 2 on the right, 3 on the bottom, and 4 on the left.
| example | |
| ------------------- | ------------------------------------------------------------------- |
| `padding: 1;` | A single value sets a padding of 1 around all 4 edges |
| `padding: 1 2;` | Two values sets the padding for the top/bottom and left/right edges |
| `padding: 1 2 3 4;` | Four values sets top, right, bottom, and left padding independently |
Padding may also be set individually, following the same pattern as above, by setting `padding-top`, `padding-right`, `padding-bottom`, or `padding-left`.
Padding may also be set individually by setting `padding-top`, `padding-right`, `padding-bottom`, or `padding-left` to an single value.
## Example