box-sizing

Властивість CSS box-sizing (обрамлення) встановлює спосіб обчислення ширини та висоти елемента.

Спробуйте його в дії

Згідно з рамковою моделлю CSS, усталено встановлення width та height для елемента застосовується лише на його рамки вмісту. Якщо елемент має межі чи внутрішні відступи, то вони додаються до width та height перед отриманням розмірів рамок, що зображаються на екрані. Це означає, що при встановленні width та height слід поправити значення так, щоб передбачити появу меж чи внутрішніх відступів. Наприклад, із чотирма рамками з width: 25%;, якщо будь-яка з них має лівий або правий внутрішній відступ чи ліву або праву межу, то вони усталено не помістяться на одному ряду, враховуючи обмеження, накладені батьківським контейнером.

Властивість box-sizing може бути використана для зміни такої поведінки:

• content-box (рамки вмісту) – усталена поведінка обрамлення в CSS. Якщо встановити ширину елемента 100 пікселів, то рамки вмісту елемента матимуть ширину 100 пікселів, і будь-яка ширина меж або внутрішніх відступів буде додана поверх цього значення, і елемент у підсумку буде ширшим за 100 пікселів.

• border-box (рамки меж) вказує браузеру враховувати будь-які межі та внутрішні відступи як частину розмірів, вказаних як ширина та висота елемента. Якщо встановити ширину елемента 100 пікселів, то такі 100 пікселів включатимуть будь-які межі та внутрішні відступи, а рамки вмісту зменшаться, щоб залишити для них місце. Так зазвичай куди простіше вказувати розмір елементів.

  box-sizing: border-box – усталений стиль, що браузер застосовує для елементів <table>, <select> та <button>, а також до елементів <input>, чий тип – <a href="/uk/docs/Web/HTML/Element/input/radio">radio</a>, <a href="/uk/docs/Web/HTML/Element/input/checkbox">checkbox</a>, <a href="/uk/docs/Web/HTML/Element/input/reset">reset</a>, <a href="/uk/docs/Web/HTML/Element/input/button">button</a>, <a href="/uk/docs/Web/HTML/Element/input/submit">submit</a>, <a href="/uk/docs/Web/HTML/Element/input/color">color</a> або <a href="/uk/docs/Web/HTML/Element/input/search">search</a>.

Примітка: Часто корисно встановлювати значення box-sizing у border-box для викладання елементів. Це сильно спрощує роботу з розмірами елементів, і в загальному дає змогу уникнути низки вовчих ям, в котрі можна потрапити, розкладаючи вміст. З іншого боку, при використанні position: relative або position: absolute вживання box-sizing: content-box дає змогу вказувати значення позиціонування відносно вмісту, незалежно від варіації розмірів меж чи внутрішніх відступів, що іноді є бажаним.

Синтаксис

box-sizing: border-box;
box-sizing: content-box;

/* Глобальні значення */
box-sizing: inherit;
box-sizing: initial;
box-sizing: revert;
box-sizing: revert-layer;
box-sizing: unset;

Властивість box-sizing встановлюється як єдине ключове слово, обране зі списку значень нижче.

Значення

content-box (рамки вмісту)

Початкове та усталене значення, вказане стандартом CSS. Властивості width та height включають вміст, але не включають внутрішніх відступів, меж чи зовнішніх відступів. Наприклад, .box {width: 350px; border: 10px solid black;} дає елементові рамки 370 пікселів завширшки.

З таким значенням виміри елемента обчислюються так: width = ширина вмісту, і height = висота вмісту. (Межі та внутрішні відступи не беруть участі в обчисленні.)

border-box (рамки меж)

Властивості width та height включають вміст, внутрішні відступи та межі, але не включають зовнішніх меж. Зверніть увагу, що внутрішні відступи та межі будуть всередині рамок. Наприклад, .box {width: 350px; border: 10px solid black;} дає елементові рамки 350 пікселів завширшки, із зоною вмісту 330 пікселів завширшки. Рамки вмісту не можуть мати від'ємної розмірності, їх найменший можливий розмір – 0, тож border-box не може застосовуватись для зникнення елемента.

З таким значенням виміри елемента обчислюються так: width = межі + внутрішні відступи + ширина вмісту, а height = межі + внутрішні відступи + висота вмісту.

Формальне визначення

Формальний синтаксис

content-box | border-box

Приклади

Розміри рамок із content-box та border-box

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

HTML

<div class="content-box">Рамки вмісту</div>
<br />
<div class="border-box">Рамки меж</div>

CSS

div {
  width: 160px;
  height: 80px;
  padding: 20px;
  border: 8px solid red;
  background: yellow;
}

.content-box {
  box-sizing: content-box;
  /* Сумарна ширина: 160px + (2 * 20px) + (2 * 8px) = 216px
     Сумарна висота: 80px + (2 * 20px) + (2 * 8px) = 136px
     Ширина рамок вмісту: 160px
     Висота рамок вмісту: 80px */
}

.border-box {
  box-sizing: border-box;
  /* Сумарна ширина: 160px
     Сумарна висота: 80px
     Ширина рамок вмісту: 160px - (2 * 20px) - (2 * 8px) = 104px
     Висота рамок вмісту: 80px - (2 * 20px) - (2 * 8px) = 24px */
}

Результат

Специфікації

Сумісність із браузерами

Дивіться також

• Рамкова модель CSS