Властивість CSS box-sizing

CSS Властивість Box-sizing

Властивість box-sizing в CSS визначає, як обчислюються розміри елемента, включаючи його padding та border. Це допомагає контролювати, як буде обчислюватися загальна ширина та висота елемента при додаванні внутрішнього padding та border.

Значення пропси Box-sizing

content-box

При box-sizing: content-box, пропси width та height включають тільки вміст. Це означає, що padding та border не включені в розміри і додаються окремо.
Ширина елемента = вміст + padding + border.
Це стандартна поведінка, що використовується більшістю елементів у браузерах.

Приклад:

css

.element {
  box-sizing: content-box;
  width: 200px;
  padding: 20px;
  border: 5px solid black;
}

У цьому прикладі елемент матиме загальну ширину більше 200px, оскільки padding та border додаються до вказаної ширини.

border-box

При box-sizing: border-box, пропси width та height включають вміст, padding та border. Це означає, що вказані ширина та висота зберігаються, а padding та border вбудовані в ці розміри. Цей режим зручний, оскільки дозволяє точно контролювати розміри елемента без урахування додаткового padding. Ширина елемента = вміст (включає padding та border). Приклад

css

.element {
  box-sizing: border-box;
  width: 200px;
  padding: 20px;
  border: 5px solid black;
}

У цьому випадку елемент матиме ширину 200px, включаючи padding та border, що означає, що розмір залишається точно таким, як вказано.

Важливі моменти

box-sizing: content-box: розміри елемента можуть збільшуватися з додаванням padding та border.
box-sizing: border-box: розміри залишаються постійними, включаючи padding та border.

Рекомендація:

Використовуйте box-sizing: border-box для всіх елементів, використовуючи універсальний селектор *, щоб спростити макет і уникнути несподіваних змін розміру через padding та border.

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

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

Premium

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

Дочитали статтю?

Практика завдань

Властивість CSS box-sizing

#CSS Властивість Box-sizing

#Значення пропси Box-sizing

#content-box

#border-box