Що робить властивість box-sizing?
Властивість box-sizing визначає як обчислюється загальна ширина та висота елемента. Має 2 поведінки:
- content-box це стандартна поведінка. Якщо встановити елементу ширину 100 пікселів, то ширина його контенту буде 100 пікселів, а ширина меж і внутрішніх відступів під час рендеру буде додана до фінальної ширини, що зробить елемент ширше ста пікселів.
- border-box каже браузеру враховувати будь-які межі та внутрішні відступи у значеннях, які вказані у ширині та висоті елемента. Якщо виставити елементу ширину 100 пікселів, то ці 100 пікселів будуть містити межі та внутрішні відступи, а контент стискається, щоб виділити для них місце. Зазвичай це полегшує роботу з розмірами елементів.