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

Values sections added to CSS properties docs

Browse Source
This commit is contained in:
Darren Burns
2022-08-30 11:49:11 +01:00
parent db216d1535
commit 92f15abc42
13 changed files with 121 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
docs/styles/box_sizing.md
View File

@@ -2,19 +2,24 @@
The `box-sizing` rule impacts how `width` and `height` rules are translated in to screen dimensions, when combined with `padding` and `border`.
The default value is `border-box` which means that padding and border are included in the width and height. This setting means that if you add padding and/or border the widget will not change in size, but you will have less space for content.
You can set `box-sizing` to `content-box` which tells Textual that padding and border should increase the size of the widget, leaving the content area unaffected.
## Syntax
```
box-sizing: [border-box|content-box];
```
### Values
| Values | Description |
|------------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| `border-box` (default) | Padding and border are included in the width and height. If you add padding and/or border the widget will not change in size, but you will have less space for content. |
| `content-box` | Padding and border will increase the size of the widget, leaving the content area unaffected. |
## Example
Both widgets in this example have the same height (5). The top widget has `box-sizing: border-box` which means that padding and border reduces the space for content. The bottom widget has `box-sizing: content-box` which increases the size of the widget to compensate for padding and border.
Both widgets in this example have the same height (5).
The top widget has `box-sizing: border-box` which means that padding and border reduces the space for content.
The bottom widget has `box-sizing: content-box` which increases the size of the widget to compensate for padding and border.
=== "box_sizing.py"