Inset

Syntax

Class
Properties
inset-{value}
top: {value};
right: {value};
bottom: {value};
left: {value};

Parameters

value
<length-percentage default-unit=1px>
value
auto
<div class="t1 w-160 h-160 relative bg-c-white shadow-4"> <div class="t1 bg-c-blue-500-50 absolute inset-0">hi</div> </div>

Specification test cases

The test cases below are imported from the Turbo CSS specification. They have been executed upon loading this page.
Make the current element have the same size as its container.
t1 inset-0
.t1.inset-0 { top: 0; right: 0; bottom: 0; left: 0; }
Make the current element 1px smaller than its container.
t1 inset-1
.t1.inset-1 { top: 1px; right: 1px; bottom: 1px; left: 1px; }
Make the current element 5% smaller than its container on each side.
t1 inset-5%
.t1.inset-5\% { top: 5%; right: 5%; bottom: 5%; left: 5%; }
Automatically calculate top, right, bottom, left position.
t1 inset-auto
.t1.inset-auto { top: auto; right: auto; bottom: auto; left: auto; }