Skip to main content

Як CSS розраховує підсумковий розмір елемента?

CSSJunior~1 хв читання
Запропонувати правку

Підсумковий розмір розраховується за Box Model. Формула залежить від box-sizing.

1) При box-sizing: content-box (значення за умовчанням)

width і height стосуються лише content. Фактична ширина:

javascript
content width + padding-left + padding-right + border-left + border-right + margin-left + margin-right

Фактична висота:

javascript
content height + padding-top + padding-bottom + border-top + border-bottom + margin-top + margin-bottom

2) При box-sizing: border-box

width і height включають у себе content + padding + border.

Фактична ширина:

javascript
width (всередині вже padding і border) + margin-left + margin-right

Фактична висота:

javascript
height (всередині вже padding і border) + margin-top + margin-bottom

Ключові моменти

  • margin ніколи не входить у width/height, це зовнішній простір.
  • padding і border збільшують розмір лише в content-box.
  • border-box допомагає зберігати фіксовані розміри.

Якщо хочеш, можу візуалізувати це ASCII-схемою або зробити картинку-схему.

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

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

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

Запропонувати правку