inset
A shorthand property that sets top, right, bottom, left at once. in0 is the most concise way to completely fill a positioned parent.
Class Patterns
Specify values using the in{N}{unit} format. inset: 0 is equivalent to top: 0; right: 0; bottom: 0; left: 0.
| Class | CSS | Description |
|---|---|---|
in0 | inset: 0 | All sides 0. Completely fills positioned parent |
in8px | inset: 8px | 8px inward margin on all sides |
in2rem | inset: 2rem | 20px inward margin on all sides |
in50p | inset: 50% | 50% inward on all sides (size 0) |
ina | inset: auto | Default (auto) |
Visual Comparison
Check how elements are positioned within the parent based on inset values.
in0 -- Completely fills parent
inset: 0 sets top/right/bottom/left all to 0, completely filling the parent
in2rem -- Margin on all sides
Positioned 20px inward on all sides
in0 vs t0 r0 b0 l0 -- Same result
Same as in0 but requires 4 classes
Class Details
in0inset: 0
Completely fills the positioned parent. Most commonly used for overlays, backgrounds, click area expansion, etc. Shorthand for t0 r0 b0 l0.
<!-- Modal overlay -->
<div class="pf in0 bg0-0-0-50 zi100 df jcc aic">
<div class="bg18181B p3-2rem br12px w40rem">
<h2>Modal Title</h2>
<p>Modal Content</p>
</div>
</div>
<!-- Image overlay (gradient effect) -->
<div class="pr br8px oh">
<img class="w100p db" />
<div class="pa in0 bg0-0-0-40"></div>
<h3 class="pa b2rem l2rem cFFFFFF zi1">Title Text</h3>
</div>
<!-- Expand click area -->
<a href="#" class="pr dib">
<span class="pa in0"></span>
Small link text
</a>Common Combinations
pa in0 | Overlay that completely fills parent |
pa in0 bg0-0-0-50 | Semi-transparent dark background overlay |
pa in0 df jcc aic | Center alignment within full parent |
pf in0 zi100 | Full screen fixed overlay (modal) |
pa in0 br8px oh | Overlay that follows rounded corners |
inainset: auto
Resets inset to its default value (auto). Used to release in0 in responsive layouts.
<!-- Responsive: Remove overlay on mobile -->
<div class="pa in0 sm-ina sm-pr">
Overlay on desktop
Normal placement on mobile
</div>in{N}{unit}inset: {value}
Sets equal offset on all sides. Used for overlays slightly smaller than the parent or backgrounds with inner margins.
<!-- Overlay with inner margin -->
<div class="pr h20rem bg27272A br8px">
<div class="pa in2rem bg6366F1 o20 br4px"></div>
<div class="pa in2rem df jcc aic cFFFFFF fw600">
Area with 2rem margin on all sides
</div>
</div>
<!-- Focus ring effect -->
<button class="pr py8px px16px bg6366F1 cFFFFFF br8px bn cp">
<span class="pa in-4px br12px b2pxsolid6366F1 pen"></span>
Button
</button>in0 vs t0 r0 b0 l0
Both expressions produce the same result, but in0 is much more concise.
| <tr> <th class="tal py12px px16px bg18181B bb2pxsolid27272A cA1A1AA fw600 ttu fs12px ls0-05em">Method | Class | Class count |
|---|---|---|
| inset shorthand | in0 | 1 class |
| Individual properties | t0 r0 b0 l0 | 4 classes |
Tips & Notes
Essential overlay pattern
pa in0 is the most frequently used pattern for modal backgrounds, image overlays, card hover effects, etc. Parent must have pr.
Click area expansion
To expand click area of small buttons, add pr and a pa in0 (or negative inset) element.
position required
inset is a shorthand for top/right/bottom/left, so it does not work when position is static.