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 пікселів.
- Порада
-
Використовуйте позитивні значення для встановлення відстані від границь елемента до його контейнера.
автор: Bond - Порада
-
Можна використовувати від'ємні значення, щоб змістити границі елемента всередині його контейнера.
автор: Bond - Порада
-
Використовуйте
автор: Bondautoдля автоматичного визначення відстані від границь. - Нотатка
-
Функція
автор: Bondinset()дозволяє точно налаштовувати відстань від границь елемента, надаючи вам більшу гнучкість у створенні дизайну вашого веб-сайту.
Синтаксис
inset( <length-percentage> [ <length-percentage> | auto ]? )Функція inset може отримувати 2 значень:
-
<length-percentage> -
Значення в довжині або відсотках, яке вказує відстань від границі елемента. Може бути позитивним або від'ємним числом.
автор: Bond -
auto -
Автоматичне визначення відстані від границі. Значення auto можна використовувати для автоматичного розташування границі елемента.
автор: Bond
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
|---|---|---|---|---|---|
| 37 | 54 | 10.1 | 24 | 79 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 37 | 37 | 54 | 10.3 |
Приклади
+ запропонувати свій приклад у пісочниці
Наведіть курсор на квадрат, щоб побачити зміну.
Один з елементів використовує функцію inset() для встановлення відстані від границь елемента відносно його контейнера.
Коментарі
Коментарів ще немає — будьте першим!