width

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

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

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

Синтаксис

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

Значення

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

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

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

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

  • Властивість width працює з блоковими та інлайн-блоковими елементами. Для інлайн-елементів ширина визначається лише при зміні їх на блокові.
  • При використанні width у поєднанні з box-sizing: border-box ширина включає padding і border, що дозволяє точніше контролювати розміри елемента.
  • Для гнучких макетів часто використовують відсоткові значення разом із медіа-запитами.
  • Властивість підтримується всіма сучасними браузерами.