Розмір

Оновлено: 20.01.2023

Розмір

Властивості, що встановлюють розміри елементів, а також обмеження для них.

• block-size

  block-size

  Визначає розмір елемента за блоковою віссю, напрямок якої залежить від значення властивості writing-mode. Для горизонтального письма (writing-mode: horizontal-tb) блокова вісь буде вертикальною і block-size встановлює висоту елемента. Для вертикального напрямку письма (writing-mode: vertical-lr і writing-mode: vertical-rl) блокова вісь буде горизонтальною і block-size встановлює ширину елемента.

• box-sizing

  box-sizing

  Застосовується для зміни алгоритму розрахунку ширини і висоти елемента.

• height

  height

  Встановлює висоту вмісту елемента. За замовчуванням висота визначається автоматично, виходячи з вмісту елемента, але якщо задати фіксоване значення висоти, то вона буде встановлена, незважаючи на обсяг вмісту. Якщо вміст елемента перевищує вказане значення висоти, то висота елемента залишиться незмінною, а вміст відображатиметься поверх нього. Через цю особливість може вийти накладення вмісту елементів один на одного, коли елементи в коді HTML ідуть послідовно. Щоб цього не сталося, додайте властивість overflow зі значенням auto до стилю елемента.

• inline-size

  inline-size

  Визначає розмір елемента за рядковою віссю, напрямок якої залежить від значення властивості writing-mode. Для горизонтального листа (writing-mode: horizontal-tb) рядкова вісь буде горизонтальною, inline-size встановлює ширину елемента. Для вертикального напрямку письма (writing-mode: vertical-lr та writing-mode: vertical-rl) рядкова вісь буде вертикальною, inline-size встановлює висоту елемента.

• max-height

  max-height

  Встановлює максимальну висоту елемента. Значення висоти елемента обчислюватиметься залежно від значень встановлених властивостей height, max-height і min-height. У табл. 1 показано, чим керується браузер під час спільного використання зазначених стильових властивостей.

• max-width

  max-width

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

• min-block-size

  min-block-size

  Визначає мінімальний розмір елемента по блоковій осі, напрямок якої залежить від значення властивості writing-mode. Для горизонтального письма (writing-mode: horizontal-tb) блокова вісь буде вертикальною і min-block-size встановлює мінімальну висоту елемента. Для вертикального напрямку письма (writing-mode: vertical-lr і writing-mode: vertical-rl) блокова вісь буде горизонтальною і min-block-size встановлює мінімальну ширину елемента.

• min-height

  min-height

  Задає мінімальну висоту елемента. Значення висоти елемента обчислюватиметься залежно від установлених значень властивостей height, max-height і min-height. У табл. 1 показано, чим керується браузер під час спільного використання зазначених стильових властивостей.

• min-width

  min-width

  Встановлює мінімальну ширину елемента. Якщо вікно браузера за шириною стає меншим за задану мінімальну ширину елемента, то ширина елемента залишається незмінною, а у вікні з'являється горизонтальна смуга прокрутки.

• width

  width

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