box-sizing контролирует что именно измеряют свойства width и height. Значение по умолчанию (content-box) измеряет только содержимое; border-box делает так, чтобы они включали отступы и границу.
box-sizing контролирует что именно измеряют свойства width и height. Значение по умолчанию (content-box) измеряет только содержимое; border-box делает так, чтобы они включали отступы и границу.
.box {
box-sizing: content-box; /* the default */
width: 200px;
padding: 20px;
border: 5px solid;
}
/* Rendered width = 200 + 2×20 + 2×5 = 250px ← bigger than you asked for! */
С content-box, отступы и граница добавляются сверху к width, поэтому элемент становится шире, чем установленное значение. Это нарушает макеты: блок с width: 50% и отступами выходит за пределы своих 50%.
.box {
box-sizing: border-box;
width: 200px;
padding: 20px;
border: 5px solid;
}
/* Rendered width = 200px TOTAL. Content shrinks to 150px to make room. */
С border-box, width — это финальная отрисовываемая ширина — отступы и граница вычитаются изнутри. Число, которое вы установили, это размер, который вы получите, что намного интуитивнее.
*, *::before, *::after {
box-sizing: border-box;
}
Почти каждый современный стиль, фреймворк и сброс применяют это глобально. Это делает изменение размеров предсказуемым: width: 50% + отступы остаются ровно 50% в ширину, два блока с width: 50% располагаются рядом без переполнения и т.д.
border-box устраняет самый частый источник проблем с расчётом макета — необходимость мысленно добавлять отступы и границу к каждой ширине.
Установка этого глобально считается лучшей практикой по умолчанию, потому что "ширина, которую я установил, это ширина, которую я получу" — это то, как вы естественно ожидаете работать изменение размеров.