From 8ba663f6f489a16f3532a864ca57a3b30d3dd759 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Emil=20Sj=C3=B6lander?= Date: Tue, 13 Feb 2018 06:37:42 -0800 Subject: [PATCH] Document margins, paddings, and borders Reviewed By: danielbuechele Differential Revision: D6976134 fbshipit-source-id: dcf870d9a88478ed1aef68e9840e7b17467b87bb --- .../properties/margins-paddings-borders.md | 24 ++++++++++++++++++- 1 file changed, 23 insertions(+), 1 deletion(-) diff --git a/website/contents/properties/margins-paddings-borders.md b/website/contents/properties/margins-paddings-borders.md index 54f547b1..06f3f2fb 100644 --- a/website/contents/properties/margins-paddings-borders.md +++ b/website/contents/properties/margins-paddings-borders.md @@ -5,4 +5,26 @@ hasPlayground: true editableProperties: ['margin', 'padding', 'border'] --- -## Margins, Paddings, and Borders \ No newline at end of file +## Margins, Paddings, and Borders + +### Margin + +Margin effect 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 + +Padding affect 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 + +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. +