Поставити
box-sizing: border-box і забути. Ну якось так сьогодні виглядає перший рядок CSS на проєкті. Але чи всі знають, що це таке та на що впливає? Давайте глянемо.box-sizing визначає, в який спосіб буде розраховано значення розмірів у box model – тобто як бравзер рахує фактичний розмір елемента в макеті. Давайте пригадаємо, з чого складаються фактичні виміри:— content: розміри вмісту всередині елемента;
— padding: внутрішні відступи між вмістом та бордером;
— border: товщина рамки навколо елемента;
Ці три значення й визначають фінальний розмір. А от як саме — визначає та сама box model.
За замовчуванням усі блочні елементи використовують content-box, і це означає, що властивість
width застосовується до content box, тобто до внутрішньої зони.Таким чином фінальний розмір визначається формулою:
total = content + padding + border;
де content це значення width або height, залежно від виміру. Саме тому, якщо задати елементу
width: 100px, padding: 4px та border-width: 1px ми отримаємо фактичну ширину в 110 пікселів.А що робить
border-box? Він змінює підхід до розрахунку. І тепер формула набуває іншого вигляду:content = total - padding - border;
Тепер width описує розмір усього елемента, а внутрішній content автоматично підлаштовується.
Чому ми надаємо перевагу саме
border-box? Причина проста: розміри стають передбачуваними. Якщо ми кажемо, що ширина має бути 100 пікселів, вона й буде 100 пікселів, незалежно від падінгів та бордерів.Але тоді випливає інший неприємний наслідок — місце для вмісту тоді стає помітно тіснішим, що може призводити до візуально неприємного затискання контенту. Очевидно, що це не баг, а цілком очікувана поведінка, тож вважайте.
До речі, колись у Firefox існував ще експериментальний
padding-box, в якому значення width задавало суму content та padding, лишаючи border поза формулою. Але це не прижилося. Може й на краще.І ще важливо, що margin ніколи не входив, не входить і, сподіваюсь, не входитиме до box-model, адже це не вимір елемента, а його відступ від навколишніх елементів в макеті.
border-box у стандарті зʼявився не відразу, перші робочі драфти було опубліковано на початку 00-х. А от широкої підтримки це значення набуло десь так в 2012 році.Цікавий факт: саме така поведінка box model була в IE5-IE6, але не через прогресивне мислення розробників бравзера, а через банальний баг. І багато хто вважав, що така поведінка є інтуїтивнішою, ніж стандартна.
Не буду робити висновків, але хто зна, може ми б і не мали
border-box взагалі, або мали б його набагато пізніше, якби не цей баг в IE. І вкотре бравзер, який чомусь прийнято гейтити, змінив веброзробку на краще.Що почитати
MDN: box-sizing
***
@babichdev