Генератор плинних відступів clamp()
Обчисліть реальне плинне значення CSS clamp() з мінімального та максимального розміру за двох ширин вʼюпорта — зі слоупом і перетином, показаними покроково, та живим превʼю зміни розміру.
Результат
CSS clamp() працює для відступів так само, як і для розміру шрифту — просто властивість тепер не font-size, а margin, padding чи gap. Ця сторінка відкриває калькулятор із діапазоном 8px–32px за вʼюпорта від 320px до 1280px — поширений крок для відступів секцій чи проміжків між картками, які мають бути щільними на телефоні й просторими на десктопі без жодного медіазапиту.
Базовій математиці байдуже, що означають числа: та сама формула слоупу й перетину осі Y, що дає плинний розмір заголовка, дає й плинне значення відступу, тож розбір нижче показує, як саме 8px і 32px перетворюються на готовий рядок clamp() для padding: clamp(...).
Перетягніть повзунок ширини вʼюпорта, щоб побачити, яким відступ був би за будь-якої ширини між двома межами, скоригуйте мінімальне й максимальне значення для вужчого чи ширшого діапазону і скопіюйте готовий рядок прямо в потрібну властивість відступу.