Files
yoga/website/contents/properties/margins-paddings-borders.md
Daniel Büchele 8c5cbf698b Inline controls for docs
Summary:
Adding inline controls in markdown using:
```
<controls prop="flexWrap"></controls>
```

Reviewed By: emilsjolander

Differential Revision: D6987150

fbshipit-source-id: 28def12df702ba5d5d5b6a83dd1cb907716d1b1c
2018-02-14 08:17:21 -08:00

1.1 KiB

path, title, hasPlayground
path title hasPlayground
docs/margins-paddings-borders Margins, Paddings, and Borders true

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.