CSS function inset()
Опис
Функція inset() в CSS є потужним інструментом для налаштування відстані між границями елемента та його контейнера. Ця функція дозволяє вам точно задавати положення границь елемента з урахуванням його верхньої, правої, нижньої та лівої сторін.
Для використання функції inset() потрібно передати значення в довжині або відсотках. Параметри функції вказують відстані від відповідних границь (верхньої, правої, нижньої, лівої). Ви можете вказати відстань від будь-якої з границь, і при цьому функція використовуватиме значення auto для невказаних границь.
Приклад використання функції inset():
.element {
inset: 10px 20px 10px 20px;
}
У даному прикладі ми використовуємо функцію inset() для встановлення відстані від границь елемента з класом .element. Параметри функції вказують, що відстань від верхньої границі буде 10 пікселів, від правої границі - 20 пікселів, від нижньої границі - 10 пікселів і від лівої границі - 20 пікселів.
Інші приклади значень inset():
inset(10px): Відстань від границь елемента 10 пікселів на всіх сторонах.inset(10px 20px): Відстань від верхньої та нижньої границь - 10 пікселів, від правої та лівої границь - 20 пікселів.
| Порада: | Використовуйте позитивні значення для встановлення відстані від границь елемента до його контейнера. |
| Порада: | Можна використовувати від'ємні значення, щоб змістити границі елемента всередині його контейнера. |
| Порада: | Використовуйте |
| Нотатка: | Функція |
Синтаксис
inset( <length-percentage> [ <length-percentage> | auto ]? )<length-percentage>Значення в довжині або відсотках, яке вказує відстань від границі елемента. Може бути позитивним або від'ємним числом.
autoАвтоматичне визначення відстані від границі. Значення auto можна використовувати для автоматичного розташування границі елемента.
Переглядачі
| Переглядач | |||||
|---|---|---|---|---|---|
37 |
54 |
10.1 |
24 |
79 |
| Переглядач | ||||
|---|---|---|---|---|
37 |
37 |
54 |
10.3 |
Мобільних переглядачів ще не додано.
Приклади
Наведіть курсор на квадрат, щоб побачити зміну.
Один з елементів використовує функцію inset() для встановлення відстані від границь елемента відносно його контейнера.