Inset
Position an element relative to its edges.
The inset property (historically top, right, bottom, left) defines the offsets for positioned elements. Its behavior depends on the position property.
Properties
inset is a helper property in Taffy (and CSS shorthand) that sets:
| Property | Description |
|---|---|
top | Distance from the top edge. |
bottom | Distance from the bottom edge. |
left | Distance from the left edge. |
right | Distance from the right edge. |
Behavior
- For
Position.Absolute: Offsets use the containing block established by the direct parent. Grid placement can define a containing area within a Grid parent. - For
Position.Relative: Offsets move the item relative to its normal position in the flow.
The edge names remain physical in both LTR and RTL. The inset object requires all four fields; use "auto" for unspecified edges, or set individual properties such as right.
Example
Loading Preview…