Skip to main content

Що таке Box Model у CSS? З яких частин складається Box Model?

Box Model, це модель, за якою браузер розраховує розмір і простір навколо кожного блокового елемента. Будь-який елемент у CSS вважається прямокутною коробкою, що складається з чотирьох областей (від центру назовні):

  1. Content, вміст (текст, зображення, контент елемента).
  2. Padding, внутрішні відступи між контентом і межею.
  3. Border, рамка елемента.
  4. Margin, зовнішній відступ, який створює простір між елементом і сусідами.

Схема

javascript
+-------------------------+ | margin | | +-------------------+ | | | border | | | | +-------------+ | | | | | padding | | | | | | +---------+ | | | | | | | content | | | | | | | +---------+ | | | | | +-------------+ | | | +-------------------+ | +-------------------------+

Content + padding + border + margin, визначають повний візуальний розмір елемента на сторінці.

Коротка відповідь

Для співбесіди
Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.