Рамкова модель CSS
Модуль Рамкової моделі CSS визначає властивості height
, width
, margin
і padding
, які разом із властивостями меж утворюють рамкову модель CSS.
Кожний видимий елемент на вебсторінці – це рамка, скомпонована згідно з моделлю візуального форматування. Властивості CSS визначають для цих рамок їхні розмір, положення та рівень у нагромадженні (stacking level), а властивості рамкової моделі (серед інших) визначають власний розмір кожної рамки та вільний простір навколо неї.
Кожна рамка має прямокутну область вмісту, всередині якої виводяться текст, зображення та інший вміст. Цей вміст може бути оточений внутрішніми відступами, межею та зовнішніми відступами на одному або декількох боках. Внутрішні відступи – навколо вмісту, межа – навколо внутрішніх відступів, а зовнішні відступи – поза межами. Рамкова модель описує, як ці аспекти – вміст, внутрішні відступи, межі та зовнішні відступи – взаємодіють для утворення рамки, яку відображає CSS.
Модуль Рамкової моделі CSS визначає фізичні (тобто "відносні щодо сторінки") властивості, штибу width
та margin-top
. Плинові властивості, штибу inline-size
та margin-block-start
(які стосуються напрямку тексту), визначені в Логічних властивостях та значеннях. Модуль рамкової моделі розширюється модулем Розмірності рамки CSS, який вводить значення власного розміру та дає змогу визначати співвідношення сторін для елементів, які автоматично змінюють розмір принаймні в одному напрямку.
Довідка
Властивості
box-sizing
height
margin
margin-bottom
margin-left
margin-right
margin-top
margin-trim
max-height
max-width
min-height
min-width
padding
padding-bottom
padding-left
padding-right
padding-top
width
Типи даних
Посібники
- Вступ у Рамкову модель CSS
Пояснює одну з фундаментальних концепцій CSS – рамкову модель. Ця модель визначає, як CSS компонує елементи, включно з їхніми областями вмісту, внутрішніми відступами, межами та зовнішніми відступами.
- Опанування перекриття зовнішніх полів
Іноді два сусідні зовнішні відступи перекриваються. Ця стаття описує правила, що керують тим, коли та чому це відбувається, і як це контролювати.
- Модель візуального форматування
Пояснює модель візуального форматування.
Споріднені концепції
- Модуль Фонів і меж CSS
- Модуль Логічних властивостей CSS
block-size
inline-size
max-block-size
max-inline-size
min-block-size
min-inline-size
margin-block
margin-block-end
margin-block-start
margin-inline
margin-inline-end
margin-inline-start
padding-block
padding-block-end
padding-block-start
padding-inline
padding-inline-end
padding-inline-start
border-block
border-block-end
border-block-end-width
border-block-start
border-block-start-width
border-block-style
border-block-width
border-inline
border-inline-end
border-inline-end-width
border-inline-start
border-inline-start-width
border-inline-width
- Модуль Розмірності рамок CSS
- Модуль Переповнення CSS
Специфікації
Специфікація |
---|
CSS Box Model Module Level 4 (CSS Box Model 4) |
CSS Box Model Module Level 3 (CSS Box Model 3) |
Дивіться також
- Модуль Відображення CSS
- Модуль Гнучкого компонування CSS
- Модуль Сіткового компонування CSS
- Модуль Таблиць CSS
- Модуль Позиційного компонування CSS
- Модуль Подрібнення CSS
- Розуміння співвідношення сторін