From b4b6d3a43d65e4a71bf788501caa3a048d5730c7 Mon Sep 17 00:00:00 2001 From: Joe Vilches Date: Tue, 12 Mar 2024 11:31:46 -0700 Subject: [PATCH] Add margin padding border documentation (#1600) Summary: Pull Request resolved: https://github.com/facebook/yoga/pull/1600 tsia Reviewed By: NickGerleman Differential Revision: D54779378 fbshipit-source-id: f20c428034b38d5dcb0220f8e411df22fa9078f1 --- .../docs/examples/margin-padding-border.mdx | 35 +++++++++++++++++++ 1 file changed, 35 insertions(+) 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. + + + + + + +`} />