Модуль CSS box sizing

Модуль CSS box sizing позволяет разработчикам задавать, как элементы вписываются в свой контент или конкретный контекст макета. Он определяет свойства размеров, минимальных размеров, максимальных размеров, а также расширяет свойства размеров CSS ключевыми словами, которые представляют размер по содержанию внутренний размер и размер по контексту внешний.

Элементы могут быть размером по контексту или по содержанию. Модель CSS box model определяет свойства, относящиеся к странице, для явного, или «внешнего» задания размера элемента, включая width, height, padding, и margin свойства (наряду с border свойствами, определенными в модуле CSS backgrounds and borders). Этот модуль CSS box sizing расширяет модуль CSS box model, позволяя элементу иметь размер по содержанию — задавая размер элемента на основе размера его содержимого.

Значения размеров, представленные в этом модуле, позволяют элементам с содержанием размера принимать явные внутренние размеры, как если бы ширина и высота их контента во потоке соответствовали указанному явному внутреннему размеру, а не размеру, как если бы они были пустыми.

Этот модуль также представил возможность определения соотношения сторон для элемента box, что означает, что браузер может автоматически изменять размеры элемента для поддержания заданного соотношения сторон, если один из размеров автоматически задаётся.

Модуль логического свойства и значения расширил свойства, доступные в моделях box и box sizing, добавив эквиваленты соответствующих физических свойств модели box и свойств внутреннего размера с учетом направления записи.