inset
Skrót, który ustawia top, right, bottom i left w jednej deklaracji.
- Wartość domyślna
auto- Dziedziczona
- Nie
- Animowalna
- tak, jako długość lub procent
- Dotyczy
- elementy pozycjonowane (position inne niż static)
- JavaScript
element.style.inset = "0"
Przykład
#.cover {
position: relative;
}
.cover::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
}<div class="cover" style="height: 150px; border-radius: 12px; overflow: hidden; background: url('/collections/covers/jak-zostac-programista.webp') center / cover;"></div>Definicja i zastosowanie
#Właściwość inset to skrót dla czterech właściwości przesunięcia: top, right, bottom i left. Działa jak margin czy padding: jedna wartość ustawia wszystkie strony, dwie ustawiają osobno pion i poziom, a cztery kolejno górę, prawą stronę, dół i lewą.
Najczęstsze użycie to inset: 0 na elemencie z position: absolute. Element rozciąga się wtedy na całego rodzica, co jest wygodne przy nakładkach, tłach i przyciemnieniach obrazów.
Podobnie jak pojedyncze przesunięcia, inset działa tylko na elementach z position innym niż static.
Składnia
#inset: <góra> <prawa>? <dół>? <lewa>?;Wartości
#- Element rozciąga się na całą powierzchnię punktu odniesienia.
- Jednakowy odstęp 16px ze wszystkich stron.
- Pierwsza wartość to góra i dół, druga to lewa i prawa strona.
- Cztery wartości: element przylega do lewego dolnego rogu.
Wartości w praktyce
#0
.demo { inset: 0; }16px
.demo { inset: 16px; }20px 40px
.demo { inset: 20px 40px; }auto auto 12px 12px
.demo { inset: auto auto 12px 12px; }Obsługa przeglądarek
#Szeroko dostępne
Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.
- Chrome
- Edge
- Firefox
- Safari
Dobre praktyki
#inset: 0razem zmargin: autoi znanym rozmiarem to prosty sposób na wyśrodkowanie elementu absolutnego.- Do okien modalnych na cały ekran połącz
position: fixedzinset: 0.
Powiązane hasła
#- positionWybiera sposób pozycjonowania elementu: w przepływie, względnie, absolutnie, na stałe lub przyklejony.
- topOdsuwa pozycjonowany element od górnej krawędzi jego punktu odniesienia.
- leftOdsuwa pozycjonowany element od lewej krawędzi jego punktu odniesienia.
- z-indexUstala, który element leży wyżej, gdy elementy na siebie nachodzą.
Widzisz błąd albo brakuje przykładu? Napisz do nas.