Почему у нас нет box-sizing: margin-box;
? Обычно, когда мы помещаем box-sizing: border-box;
в наши таблицы стилей, мы действительно имеем в виду первое.
Пример:
Допустим, у меня есть макет страницы с двумя столбцами. Ширина обоих столбцов составляет 50%, но они выглядят некрасиво, потому что нет желоба (промежуток в середине); Ниже приведен код CSS:
.col2 {
width: 50%;
float: left;
}
Чтобы применить желоб, вы можете подумать, что мы можем просто установить правое поле в первом из 2 столбцов; что-то вроде этого:
.col2:first-child {
margin-right: 24px;
}
Но это приведет к переносу второго столбца на новую строку, потому что верно следующее:
50% + 50% + 24px > 100%
box-sizing: margin-box;
решит эту проблему путем включения поле в расчетной ширине элемента. Я бы нашел это очень полезным, если не более полезным, чем box-sizing: border-box;
.