From d82d938f2cb6c9b1192c197c15663507e8aefe04 Mon Sep 17 00:00:00 2001
From: Jakub Sobon <jakub.sobon@elohim.sk>
Date: Mon, 11 Mar 2019 00:01:01 -0400
Subject: [PATCH] Created Margin and padding (markdown)

---
 Margin-and-padding.md | 110 ++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 110 insertions(+)
 create mode 100644 Margin-and-padding.md

diff --git a/Margin-and-padding.md b/Margin-and-padding.md
new file mode 100644
index 0000000..a492004
--- /dev/null
+++ b/Margin-and-padding.md
@@ -0,0 +1,110 @@
+[![Doc Status](https://godoc.org/github.com/mum4k/termdash/container?status.png)](https://godoc.org/github.com/mum4k/termdash/container)
+
+The terminal layout can be further adjusted by configuring margin and padding of containers. A **margin** is a cleared space on the outside of the container, i.e. between its border and whats beyond it. A **padding** is a cleared space on the inside of the container, i.e. between its border and its content.
+
+The following diagram gives a visual explanation of where margin and padding apply:
+
+[[/images/container-api/container_margin_padding.png|container_margin_padding]]
+
+The margin or padding can be applied to a container by specifying absolute or relative values.
+
+## Absolute values
+
+Absolute margin or padding is specified as the amount of **cells** that should be cleared. When specifying absolute values, the padding remains unchanged even if the terminal and container size changes.
+
+Use one of the following options to specify absolute margin:
+
+- [container.MarginTop](https://godoc.org/github.com/mum4k/termdash/container/#MarginTop)
+- [container.MarginRight](https://godoc.org/github.com/mum4k/termdash/container/#MarginRight)
+- [container.MarginBottom](https://godoc.org/github.com/mum4k/termdash/container/#MarginBottom)
+- [container.MarginLeft](https://godoc.org/github.com/mum4k/termdash/container/#MarginLeft)
+
+Use one of the following options to specify absolute padding:
+
+- [container.PaddingTop](https://godoc.org/github.com/mum4k/termdash/container/#PaddingTop)
+- [container.PaddingRight](https://godoc.org/github.com/mum4k/termdash/container/#PaddingRight)
+- [container.PaddingBottom](https://godoc.org/github.com/mum4k/termdash/container/#PaddingBottom)
+- [container.PaddingLeft](https://godoc.org/github.com/mum4k/termdash/container/#PaddingLeft)
+
+## Relative values
+
+Relative margin or padding is specified as a percentage of the container's size. Specifying relative values is useful to accommodate terminal and container size changes. When the terminal size changes, so does the padding or margin.
+
+Use one of the following options to specify relative margin. The **top** and **bottom** values are specified as percentage of the container's **height**.
+
+- [container.MarginTopPercent](https://godoc.org/github.com/mum4k/termdash/container/#MarginTopPercent)
+- [container.MarginBottomPercent](https://godoc.org/github.com/mum4k/termdash/container/#MarginBottomPercent)
+
+The **right** and **left** values are specified as percentage of the container's **width**.
+
+- [container.MarginRightPercent](https://godoc.org/github.com/mum4k/termdash/container/#MarginRightPercent)
+- [container.MarginLeftPercent](https://godoc.org/github.com/mum4k/termdash/container/#MarginLeftPercent)
+
+Use one of the following options to specify relative padding. The **top** and **bottom** values are specified as percentage of the container's **height**.
+
+- [container.PaddingTopPercent](https://godoc.org/github.com/mum4k/termdash/container/#PaddingTopPercent)
+- [container.PaddingBottomPercent](https://godoc.org/github.com/mum4k/termdash/container/#PaddingBottomPercent)
+
+The **right** and **left** values are specified as percentage of the container's **width**.
+
+- [container.PaddingRightPercent](https://godoc.org/github.com/mum4k/termdash/container/#PaddingRightPercent)
+- [container.PaddingLeftPercent](https://godoc.org/github.com/mum4k/termdash/container/#PaddingLeftPercent)
+
+# Applying margin and padding to containers
+
+The following code snippet demonstrates application and effect of margin and padding. The left container has both margin and padding applied. The right container has none of these options. Both containers contain a single button and have a border.
+
+```go
+t, err := termbox.New()
+if err != nil {
+    return fmt.Errorf("termbox.New => %v", err)
+}
+defer t.Close()
+
+addB, err := button.New("(a)dd", func() error {
+    return nil
+})
+if err != nil {
+    return fmt.Errorf("button.New => %v", err)
+}
+
+subB, err := button.New("(s)ubtract", func() error {
+    return nil
+})
+if err != nil {
+    return fmt.Errorf("button.New => %v", err)
+}
+
+c, err := container.New(
+    t,
+    container.Border(linestyle.Light),
+    container.SplitHorizontal(
+        container.Top(),
+        container.Bottom(
+            container.SplitVertical(
+                container.Left(
+                    container.PlaceWidget(addB),
+                    container.AlignHorizontal(align.HorizontalRight),
+                    container.Border(linestyle.Light),
+                    container.MarginBottom(3),
+                    container.MarginRight(1),
+                    container.PaddingRight(3),
+                ),
+                container.Right(
+                    container.PlaceWidget(subB),
+                    container.AlignHorizontal(align.HorizontalLeft),
+                    container.Border(linestyle.Light),
+                ),
+            ),
+        ),
+        container.SplitPercent(60),
+    ),
+)
+if err != nil {
+    return fmt.Errorf("container.New => %v", err)
+}
+```
+
+The code above results in the following layout:
+
+[[/images/container-api/container_margin_padding_actual.png|container_margin_padding_actual]]
\ No newline at end of file