---
sidebar_position: 8.5
---

import Playground from '@site/src/components/Playground';
import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';

# Insets

Insets refer to the position property that you can assign to an edge
(not to be confused with [position type](/docs/styling/position)) using one of the following
APIs:
<Tabs groupId="language">
<TabItem value="cpp" label="C/C++">
```cpp
YGNodeStyleSetPosition(node, edge, position);
```
</TabItem>
<TabItem value="java" label="Java">
```java
node.setPosition(edge, position);
```
</TabItem>
<TabItem value="js" label="JavaScript">
```typescript
node.setPosition(edge, position);
```
</TabItem>
</Tabs>
This property will offset the node in a specific way depending on
what [position type](/docs/styling/position) the node has.

* If the node is static then insets have no effect.
* If the node is relative then insets will move the node the designated amount
from where the node would normally be in the container. Each inset property
is relative to the node's corresponding physical edge. So `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.
* If the node is absolute then insets will move the node the designated amount away from
the node's [containing block](/docs/advanced/containing-block). So `YGNodeStyleSetPosition(node, YGEdgeRight, 10.0f)`
will offset the node so that the right edge is 10 units away from the [containing block's](/docs/advanced/containing-block)
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>`} />