JS властивість CSSStyleDeclaration.boxSizing

Загальний опис

element.style.boxSizing - це властивість, яка визначає, як враховуються відступи (padding) та рамки (border) при обчисленні загальної ширини і висоти елемента. Вона може приймати значення content-box, яке є значенням за замовчуванням, або border-box.

За замовчуванням, якщо властивість встановлена на content-box, ширина та висота елемента враховують лише контент, а відступи і рамки додаються до цієї ширини і висоти. Наприклад, якщо ми встановимо ширину елемента на 300 пікселів і додамо 20 пікселів відступу з кожного боку, тоді загальна ширина елемента буде 340 пікселів.

Приклад:

let element = document.getElementById('myElement');
element.style.boxSizing = 'content-box';
element.style.width = '300px';
element.style.padding = '20px';
console.log(Total width: ${element.offsetWidth}px); // Відобразить ширину більше 300px

З іншого боку, якщо ми встановимо властивість на border-box, то ширина і висота елемента включатимуть контент, відступи і рамки. Це означає, що якщо ми встановимо ширину елемента на 300 пікселів і додамо 20 пікселів відступу, то загальна ширина все одно буде 300 пікселів, але контент займе менше місця.

Приклад:

let element = document.getElementById('myElement');
element.style.boxSizing = 'border-box';
element.style.width = '300px';
element.style.padding = '20px';
console.log(Total width: ${element.offsetWidth}px); // Відобразить ширину 300px

Використання border-box може бути корисним для збереження узгодженої ширини елементів при додаванні відступів та рамок, що може полегшити створення адаптивних макетів. Це особливо корисно при роботі з flexbox або grid layout, де важливо контролювати розміри елементів.

Ще один випадок використання boxSizing полягає в тому, що він дозволяє уникнути проблем з переповненням елементів. Наприклад, якщо у вас є контейнер з фіксованою шириною, і ви додаєте до нього елементи з великими відступами або рамками, встановлення boxSizing на border-box дозволить уникнути того, що ці елементи будуть виходити за межі контейнера.

Приклад:

let container = document.getElementById('container');
let child = document.createElement('div');
child.style.boxSizing = 'border-box';
child.style.width = '100%';
child.style.padding = '10px';
container.appendChild(child);

Таким чином, element.style.boxSizing є важливою властивістю для управління розмірами елементів на сторінці. Використання цієї властивості дозволяє більш точно контролювати, як відступи і рамки впливають на загальні розміри елементів, що особливо корисно для створення адаптивних і стабільних макетів.

правити

Порада

Використовуйте content-box для елементів, де важливо враховувати тільки розмір контенту. Це може бути корисно для внутрішніх елементів, де розмір контенту визначає розмір контейнера, а не зовнішні рамки чи відступи. Наприклад:

element.style.boxSizing = 'content-box';

дозволить вам зосередитися на управлінні саме контентом, не враховуючи додаткові стилі, що можуть вплинути на загальні розміри.

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

element.style.boxSizing

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	10	29	5.1	7	12	8

Підтримка: мобільні переглядачі

Переглядач
	4	18	29	6

Приклади

+ запропонувати свій приклад у пісочниці

<form id="myFormElement">
    <label>Ім'я: <input type="text" name="name" value="Лесь"></label>
    <button type="submit">Надіслати</button>
</form>

let formElement = document.getElementById('myFormElement');
formElement.style.width = '100%';
formElement.style.padding = '10px';
formElement.style.border = '2px solid #000';
formElement.style.boxSizing = 'border-box';

<div id="myGridItem">Демонстраційний елемент</div>

let gridItem = document.getElementById('myGridItem');
gridItem.style.width = '25%';
gridItem.style.padding = '15px';
gridItem.style.border = '1px solid #ccc';
gridItem.style.boxSizing = 'border-box';