website/docs/styling/insets.mdx
import Playground from '@site/src/components/Playground'; import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem';
Insets refer to the position property that you can assign to an edge (not to be confused with position type) using one of the following APIs: <Tabs groupId="language"> <TabItem value="cpp" label="C/C++">
YGNodeStyleSetPosition(node, edge, position);
YGNodeStyleSetPosition(node, YGEdgeRight, 10.0f) will offset the node
so that the right edge is 10 units away from where the right edge would be originally.YGNodeStyleSetPosition(node, YGEdgeRight, 10.0f)
will offset the node so that the right edge is 10 units away from the containing block's
right edge.In the event that a node has a fixed size and opposite insets are defined (e.g. a value assigned to the right edge and left edge) then the left and top edge will have priority.
<Playground code={<Layout config={{useWebDefaults: false}}> <Node style={{ width: 200, height: 200, }}> <Node style={{ height: 50, width: 50, top: 50, left: 50, }} /> </Node> </Layout>} />