top, right, bottom, left
The offsets of a positioned element from the edges of its reference box: top, right, bottom and left.
Syntax
top: 0; right: 0; bottom: 0; left: 0;Values
| Parameter | Type | Description |
|---|---|---|
| top | length | The distance from the top edge. |
| right | length | The distance from the right edge. |
| bottom | length | The distance from the bottom edge. |
| left | length | The distance from the left edge. |
Examples
Labels in different corners:
<style>
.box { position: relative; height: 120px; background: whitesmoke; }
.box span { position: absolute; background: teal; color: white; padding: 2px 6px; }
</style>
<div class="box">
<span style="top: 0; left: 0;">top left</span>
<span style="top: 0; right: 0;">top right</span>
<span style="bottom: 0; left: 50%;">bottom, from 50%</span>
</div>Notes
The offsets work only with position other than static. Setting both left and right stretches the element between them; inset: 0 sets all four sides at once.
See also
- position — How an element is positioned: in the normal flow or by offsets.
- margin-inline — Logical properties: sizes and spacing by the direction of the text instead of left, right, top and bottom.
- z-index — Which positioned element is drawn on top when they overlap.
Related recipes
In the tutorial
- Positioning — The position property — static, relative, absolute, fixed and sticky, the top, right, bottom, left and inset offsets.