diff --git a/website-next/docs/examples/margin-padding-border.mdx b/website-next/docs/examples/margin-padding-border.mdx
index 8a61306e..b10256ee 100644
--- a/website-next/docs/examples/margin-padding-border.mdx
+++ b/website-next/docs/examples/margin-padding-border.mdx
@@ -2,4 +2,39 @@
 sidebar_position: 11
 ---
 
+import Playground from '@site/src/components/Playground';
+
 # Margin, Padding, and Border
+
+**Margin**: affects the spacing around the outside of a node. A node with margin
+will offset itself from the bounds of its parent but also offset the
+location of any siblings. The margin of a node contributes to the total size
+of its parent if the parent is auto sized.
+
+**Padding**: affects the size of the node it is applied to. Padding in Yoga acts as if
+`box-sizing: border-box;` was set. That is padding will not add to the total size
+of an element if it has an explicit size set. For auto sized nodes padding will increase
+the size of the node as well as offset the location of any children.
+
+**Border**: in Yoga acts exactly like padding and only exists as a seperate property so
+that higher level frameworks get a hint as to how thick to draw a border. Yoga however
+does not do any drawing so just uses this information during layout where border
+acts exactly like padding.
+
+<Playground code={`<Layout config={{useWebDefaults: false}}>
+  <Node
+    style={{
+      width: 200,
+      height: 200,
+      padding: 10,
+    }}>
+    <Node
+      style={{
+        margin: 5,
+        padding: 20,
+        borderWidth: 20,
+        height: 50
+      }}/>
+    <Node style={{height: 50}} />
+  </Node>
+</Layout>`} />