min-width

CSS-властивість min-width визначає мінімальну ширину елемента, тобто найменшу ширину, до якої елемент може бути стиснутий. Вона дозволяє контролювати адаптивність блоків, запобігаючи їхньому надмірному звуженню при зміні розміру контейнера або вікна браузера.

Інтерактивний приклад використання

Випускники GoIT працюють у 2100+ ІТ компаній України, Європи та США

Синтаксис

min-width: <length> | <percentage> | min-content | max-content | fit-content;

Значення

  • <length> — фіксоване значення відступу в одиницях виміру, таких як px, em, rem тощо.
  • <percentage> — відсоток ширини батьківського елемента. Наприклад, min-width: 50% — мінімальна ширина елемента буде половиною ширини контейнера.
  • min-content — мінімальна ширина, при якій весь вміст ще можна розмістити без обрізання; текст або блоки всередині елемента будуть переноситися до найменшої можливої ширини.
  • max-content — ширина, при якій весь вміст поміщається в один рядок без переносу. Часто це дуже велика ширина для довгих рядків тексту.
  • fit-content — ширина елемента підлаштовується під вміст, але не перевищує доступний простір контейнера.

Крім цих основних значень, у будь-якої CSS-властивості є службові значення:

  • inherit — наслідує значення від батьківського елемента;
  • initial — скидає до значення за замовчуванням;
  • unset — поводиться як inherit для властивостей, що наслідуються, і як initial для ненаслідуваних;
  • revert — скасовує стилі автора і повертає значення з таблиці стилів браузера чи користувача;
  • revert-layer — повертає значення з попереднього шару каскаду (@layer).

Додаткові моменти

  • min-width застосовується до блочних та інлайн-блочних елементів.
  • Властивість min-width перевизначає мінімальну ширину, навіть якщо задано width менше мінімального значення. Приклад*:* якщо width: 100px; min-width: 200px; — блок все одно буде шириною 200px.
  • Використовується в адаптивному дизайні для запобігання надмірному стиску елементів на маленьких екранах.
  • Часто застосовується разом з max-width для встановлення діапазону ширин елемента.
  • Властивість підтримується всіма сучасними браузерами.