From 2827edcd49e2dd76e33dd057c675bbb05040324e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rodrigo=20Gir=C3=A3o=20Serr=C3=A3o?=
 <5621605+rodrigogiraoserrao@users.noreply.github.com>
Date: Mon, 9 Jan 2023 15:43:15 +0000
Subject: [PATCH] Add example with all padding types.

---
 docs/examples/styles/padding_all.css | 45 ++++++++++++++++++++++++++++
 docs/examples/styles/padding_all.py  | 20 +++++++++++++
 docs/styles/padding.md               | 29 ++++++++++++++++--
 3 files changed, 92 insertions(+), 2 deletions(-)
 create mode 100644 docs/examples/styles/padding_all.css
 create mode 100644 docs/examples/styles/padding_all.py

diff --git a/docs/examples/styles/padding_all.css b/docs/examples/styles/padding_all.css
new file mode 100644
index 000000000..6bf822c7c
--- /dev/null
+++ b/docs/examples/styles/padding_all.css
@@ -0,0 +1,45 @@
+Screen {
+    background: $background;
+}
+
+Grid {
+    grid-size: 4;
+    grid-gutter: 1 2;
+}
+
+Placeholder {
+    width: auto;
+    height: auto;
+}
+
+#p1 {
+    /* default is no padding */
+}
+
+#p2 {
+    padding: 1;
+}
+
+#p3 {
+    padding: 1 5;
+}
+
+#p4 {
+    padding: 1 1 2 6;
+}
+
+#p5 {
+    padding-top: 4;
+}
+
+#p6 {
+    padding-right: 3;
+}
+
+#p7 {
+    padding-bottom: 4;
+}
+
+#p8 {
+    padding-left: 3;
+}
diff --git a/docs/examples/styles/padding_all.py b/docs/examples/styles/padding_all.py
new file mode 100644
index 000000000..f9387ed55
--- /dev/null
+++ b/docs/examples/styles/padding_all.py
@@ -0,0 +1,20 @@
+from textual.app import App
+from textual.containers import Container, Grid
+from textual.widgets import Placeholder
+
+
+class PaddingAllApp(App):
+    def compose(self):
+        yield Grid(
+            Placeholder("no padding", id="p1"),
+            Placeholder("padding: 1", id="p2"),
+            Placeholder("padding: 1 5", id="p3"),
+            Placeholder("padding: 1 1 2 6", id="p4"),
+            Placeholder("padding-top: 4", id="p5"),
+            Placeholder("padding-right: 3", id="p6"),
+            Placeholder("padding-bottom: 4", id="p7"),
+            Placeholder("padding-left: 3", id="p8"),
+        )
+
+
+app = PaddingAllApp(css_path="padding_all.css")
diff --git a/docs/styles/padding.md b/docs/styles/padding.md
index 701ebf17e..af3d247fd 100644
--- a/docs/styles/padding.md
+++ b/docs/styles/padding.md
@@ -33,6 +33,8 @@ Alternatively, padding can be set for each edge individually through the rules `
 
 ## Example
 
+### Basic usage
+
 This example adds padding around some text.
 
 === "Output"
@@ -52,11 +54,34 @@ This example adds padding around some text.
     --8<-- "docs/examples/styles/padding.css"
     ```
 
+### All padding settings
+
+The next example shows a grid.
+In each cell, we have a placeholder that has its padding set in different ways.
+The effect of each padding setting is noticeable in the colored background around the text of each placeholder.
+
+=== "Output"
+
+    ```{.textual path="docs/examples/styles/padding_all.py"}
+    ```
+
+=== "padding_all.py"
+
+    ```py
+    --8<-- "docs/examples/styles/padding_all.py"
+    ```
+
+=== "padding_all.css"
+
+    ```py
+    --8<-- "docs/examples/styles/padding_all.css"
+    ```
+
 ## CSS
 
 ```sass
 /* Set padding of 1 around all edges */
-padding: 1
+padding: 1;
 /* Set padding of 2 on the top and bottom edges, and 4 on the left and right */
 padding: 2 4;
 /* Set padding of 1 on the top, 2 on the right,
@@ -87,4 +112,4 @@ widget.styles.padding = (1, 2, 3, 4)
 ## See also
 
  - [`box-sizing`](./box_sizing.md) to specify how to account for padding in a widget's dimensions.
- - [`margin`](./margin.md) to add spacing around a widget.
+ - [`padding`](./margin.md) to add spacing around a widget.