⚙️ Что такое свойство box-sizing в CSS и зачем оно используется?

Свойство box-sizing определяет, включаются ли отступы и границы в общие размеры элемента.

Это влияет на то, как рассчитываются ширина и высота блока

➡️ Пример:

<div class="box">Пример</div>

<style>
  .box {
    width: 200px;
    padding: 20px;
    border: 5px solid #333;
    box-sizing: border-box;
  }
</style>

🗣 В этом примере элемент всегда занимает ровно 200px, включая отступы и границу. Без box-sizing: border-box; он стал бы шире — 250px.

Популярные значения:

• content-box — стандартное поведение (отступы прибавляются к размеру)
• border-box — всё входит в указанную ширину/высоту

CodeBase | Frontend | #CSS