Свойство box-sizing: border-box работает только для элементов с заданной шириной?

Question

[Senseich]

Всем привет! Вопрос простецкий, но что-то запутался с этим св-вом. Я задал всем * {box-sizing: border-box;} , вставил изображение и добавил ему рамку 1px. И вот тут я забыл как это работает ) К ширине изображения добавилось 2px, т.е. ширина бордера, а я думал, что рамка добавиться, а само изображение уменьшится на 2px.
Получается, чтобы box-sizing: border-box отрабатывал нужно элементам обязательно задавать ширину?

Answer 1

[Владимир Проскурин]

Изображение не будет уменьшаться, т.к. это контент, он задает ширину независимо от padding. Он задает ширину на основе установленной ширины и отступов. Возможно для вашей задачи лучше подойдет установка фиксированного размера, ну или же outline.

Comments

[Senseich]

Владимир Проскурин , ну я правильно понял, что у элемента должна быть обязательно ширина или не обязательно, чтобы это свойство отрабатывало?

[Владимир Проскурин]

Senseich, ширина нужна. Это свойство указывает на то, как будет указываться ширина параметра width, с учетом отступов или нет. С автоматической шириной на сколько я знаю, не работает.

Answer 2

[Odisseya]

Не обязательно задавать явно размер элементу — у браузера есть процесс компоновки дерева отображения, когда он сам вычисляет размеры элементов и их координаты. При вычислении размеров браузер может учитывать явно заданный вами размер или вычислить его самостоятельно исходя из правил блочной модели (потока рендеринга).

Comments

[Senseich]

Odisseya, вот вроде и понятно это свойство, а вроде и нет )

[Odisseya]

Senseich, со временем привыкаешь ) С border-box удобно, что при ширине в % ничего не вываливается. Кстати, у background-изображений есть немного схожие параметры: background-origin и background-clip.