inset

Wartości

• Od jednej do czterech wartości rozdziela się na strony jak przy margin: inset: 10px wszędzie, inset: 10px 20px u góry i u dołu 10 px, z lewej i z prawej 20 px, cztery wartości zgodnie z ruchem wskazówek zegara od góry.
• Każda wartość może być auto, długością albo procentem (jak przy top…).

Wartość początkowa: auto. Dziedziczona: nie. Dotyczy: elementów pozycjonowanych (position inne niż static).

Przykłady

Półprzezroczysta warstwa nad całą kartą:

<div class="card">
  Treść karty
  <div class="layer">Wyprzedane</div>
</div>

.card {
  position: relative;
  max-width: 260px;
  padding: 30px 12px;
  background: #eaf7ff;
  border: 1px solid #38b8f9;
}
.layer {
  position: absolute;
  inset: 0;
  padding-top: 30px;
  background: rgba(255, 255, 255, 0.8);
  color: #e91e63;
  font-weight: bold;
  text-align: center;
}

Wewnętrzna ramka 10 px od wszystkich stron i wyśrodkowanie elementu o stałym rozmiarze (inset: 0 i margin: auto):

<div class="area">
  <div class="frame"></div>
  <div class="center">Środek</div>
</div>

.area {
  position: relative;
  height: 120px;
  max-width: 300px;
  background: #eaf7ff;
}
.frame {
  position: absolute;
  inset: 10px;
  border: 2px dashed #38b8f9;
}
.center {
  position: absolute;
  inset: 0;
  width: 80px;
  height: 30px;
  margin: auto;
  background: #ffe0b2;
  text-align: center;
}

Na co uważać

• Na element niepozycjonowany (position: static) nie działa, tak samo jak top, left…
• Wartości rozdziela się jak przy margin: przy trzech wartościach środkowa dotyczy lewej i prawej strony (inset: 10px 20px 30px = 20 px z lewej i z prawej).
• Do tego samego w kierunkach logicznych służą inset-inline i inset-block (początek i koniec wiersza lub bloku).
• Bardzo starym przeglądarkom (Safari przed wersją 14.1) brakuje tego skrótu; działają tam tylko cztery pojedyncze właściwości.

Obsługa w przeglądarkach

Baseline – szeroko dostępne: we wszystkich popularnych przeglądarkach od kwietnia 2021, za szeroko dostępne uznawane od października 2023. Od wersji: Chrome 87, Firefox 66, Safari 14.1. Stan: październik 2026 (MDN browser-compat-data).

Zobacz też:
top, right, bottom, left
position
margin-inline i margin-block