Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Як CSS розраховує підсумковий розмір елемента?». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)**CSS розраховує підсумковий розмір елемента за Box Model**, і формула залежить від `box-sizing`: при `content-box` (типово) `width`/`height` стосуються лише content, а padding, border і margin додаються зверху; при `border-box` вони вже включають content + padding + border. **Ключове:** `margin` ніколи не входить у `width`/`height`, а `border-box` допомагає зберігати фіксовані розміри елемента.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)ЗображенняПідсумковий розмір розраховується за **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-схемою або зробити картинку-схему.Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.