Рамкова модель CSS

Модуль Рамкової моделі CSS визначає властивості height, width, margin і padding, які разом із властивостями меж утворюють рамкову модель CSS.

Кожний видимий елемент на вебсторінці – це рамка, скомпонована згідно з моделлю візуального форматування. Властивості CSS визначають для цих рамок їхні розмір, положення та рівень у нагромадженні (stacking level), а властивості рамкової моделі (серед інших) визначають власний розмір кожної рамки та вільний простір навколо неї.

Кожна рамка має прямокутну область вмісту, всередині якої виводяться текст, зображення та інший вміст. Цей вміст може бути оточений внутрішніми відступами, межею та зовнішніми відступами на одному або декількох боках. Внутрішні відступи – навколо вмісту, межа – навколо внутрішніх відступів, а зовнішні відступи – поза межами. Рамкова модель описує, як ці аспекти – вміст, внутрішні відступи, межі та зовнішні відступи – взаємодіють для утворення рамки, яку відображає CSS.

Складові частини Рамкової моделі CSS

Модуль Рамкової моделі CSS визначає фізичні (тобто "відносні щодо сторінки") властивості, штибу width та margin-top. Плинові властивості, штибу inline-size та margin-block-start (які стосуються напрямку тексту), визначені в Логічних властивостях та значеннях. Модуль рамкової моделі розширюється модулем Розмірності рамки CSS, який вводить значення власного розміру та дає змогу визначати співвідношення сторін для елементів, які автоматично змінюють розмір принаймні в одному напрямку.

Довідка

Властивості

Типи даних

Посібники

Вступ у Рамкову модель CSS

Пояснює одну з фундаментальних концепцій CSS – рамкову модель. Ця модель визначає, як CSS компонує елементи, включно з їхніми областями вмісту, внутрішніми відступами, межами та зовнішніми відступами.

Опанування перекриття зовнішніх полів

Іноді два сусідні зовнішні відступи перекриваються. Ця стаття описує правила, що керують тим, коли та чому це відбувається, і як це контролювати.

Модель візуального форматування

Пояснює модель візуального форматування.

Споріднені концепції

Специфікації

Специфікація
CSS Box Model Module Level 4 (CSS Box Model 4)
CSS Box Model Module Level 3 (CSS Box Model 3)

Дивіться також

Помітили помилку на цій сторінці?

Переглянути сирці на GitHub.

Редагувати вміст на GitHub.

Почати обговорення на GitHub стосовно вмісту цієї сторінки.