Рамкова модель CSS
Модуль Рамкової моделі CSS визначає прямокутні рамки, включно з їхніми внутрішніми та зовнішніми відступами, що створюються для елементів і компонуються згідно з моделлю візуального форматування.
Огляд рамкової моделі
Рамка в CSS складається з області вмісту, в якій виводяться текст, зображення чи інші елементи HTML. Навколо неї необов'язково присутній внутрішній відступ, межа, а також зовнішній відступ, усе це з одного або більше боків. Рамкова модель описує те, як ці елементи працюють разом, щоб створити рамку, яка відображається за допомогою CSS. Щоб дізнатися більше про це, прочитайте Вступ до рамкової моделі CSS.
Ключові слова країв рамки
Специфікація Рамкової моделі визначає набір ключових слів, що вказують на краї кожної частини рамки, які використовуються в CSS як значення – ключові слова, в тому числі як значення властивості box-sizing, для керування тим, як рамкова модель обчислює свій розмір.
content-boxКрай області вмісту рамки.
padding-boxКрай внутрішніх відступів рамки, а якщо з цього боку внутрішнього вмісту немає, то це те саме, що й
content-box.border-boxКрай меж рамки, а якщо з цього боку межі немає, то це те саме, що й
padding-box.margin-boxКрай зовнішніх полів рамки, а якщо з цього боку зовнішнього поля немає, то це те саме, що й
border-box.stroke-boxУ SVG позначає контурну рамку, а в CSS працює як
content-box.view-boxУ SVG позначає вихідну рамку найближчого елемента області перегляду SVG, яка є прямокутником з шириною та висотою початкової користувацької координатної системи SVG, встановленої атрибутом {{svgattr("viewBox")}} для цього елемента. У CSS працює як
border-box.
Довідка
Примітка: Ця специфікація визначає фізичні властивості внутрішніх і зовнішніх відступів. Потокові властивості, що стосуються напрямку тексту, визначені в Логічних властивостях і значеннях.
Властивості для контролю зовнішніх відступів рамки
Зовнішні відступи оточують край межі рамки та створюють проміжки між рамками.
Властивості для контролю внутрішніх відступів рамки
Внутрішні відступи додаються між краєм вмісту та краєм межі рамки.
Інші властивості
Є інші властивості, що стосуються рамкової моделі, але визначені в інших місцях.
- Межі
Властивості меж задають товщину межі, її стиль накреслення та колір.
- Переповнення
Контролює те, що відбувається, коли вмісту занадто багато, щоб поміститися в рамку.
Посібники
- Вступ у Рамкову модель CSS
Пояснює одну з фундаментальних концепцій CSS – рамкову модель. Ця модель визначає, як CSS компонує елементи, включно з їхніми областями вмісту, внутрішніми відступами, межами та зовнішніми відступами.
- Опанування перекриття зовнішніх полів
Іноді два сусідні зовнішні відступи перекриваються. Ця стаття описує правила, що керують тим, коли та чому це відбувається, і як це контролювати.
- Модель візуального форматування
Пояснює модель візуального форматування.
Специфікації
| Специфікація |
|---|
|
CSS Box Model Module Level 3 (CSS Box Model 3) |