Ответ одним словом - -box-sizing
Вы сами выбираете, как должна работать ваша блочная модель .
Лично я предпочитаю - моему случайному стыду - коробочную модель IE. Как отмечено OP, кажется более разумным иметь предварительно определенную ширину, из которой вычитаются поля, отступы и ширина границы , чем иметь ширину, до которой эти затем добавляются .
С другой стороны, я могу спокойно работать с обеими моделями, все, что мне действительно нужно, это согласованность между реализациями, в зависимости от того, какая реализация будет выбрана.
Не все считают, что это лучше. Чтобы извлечь цитату из Quirksmode .
Лично я считаю коробочную модель W3C нелогичной. Процитирую себя:
Логично, что прямоугольник измеряется от границы до границы. Возьмите физическую коробку, любую коробку. Поместите в него что-нибудь значительно меньшее, чем коробка. Попросите кого-нибудь измерить ширину коробки. Он измерит расстояние между сторонами коробки («границы»). Никому не придет в голову мерить содержимое коробки.
Веб-дизайнеры, создающие блоки для хранения содержимого, заботятся о видимой ширине поля, о расстоянии от границы до границы. Границы, а не контент, являются визуальными подсказками для пользователя сайта. Никого не интересует ширина контента.
Я согласен, модель border-box
имеет больше смысла (по крайней мере, для меня). Были споры по поводу исходной блочной модели W3C, что привело к определению свойства box-sizing
в CSS3.
Вопрос не столько в том, что лучше или хуже, сколько в том, что следует стандарту принятой организации, а что нет ..
На с другой стороны, ваши проблемы могут возникнуть у кого-то, кто хочет, чтобы его текст был заключен в контейнер 300 пикселей, который находится на расстоянии 10 пикселей от следующего. Теперь вам нужно будет выполнить те же вычисления, что и в вашем примере, чтобы вычислить ширину .. это случай того, как вы рассматриваете ту же проблему ..