CSS box sizing

The CSS box sizing module enables developers to specify how elements fit their content or fit into a particular layout context. It defines sizing, minimum sizing, and maximum sizing properties, and also extends the CSS sizing properties with keywords that represent content-based intrinsic size and context-based extrinsic size.

Elements can either be extrinsically or intrinsically sized. The CSS box model defines page-relative properties to explicitly, or "extrinsically" set an element's size, including width, height, padding, and margin properties (along with border properties defined in the CSS backgrounds and borders module). This CSS box sizing module extends the CSS box model module to enable an element to be sized intrinsically — setting element size based on the size of its content.

The sizing values introduced in this module allow elements with size containment to take explicit intrinsic sizes, as if their in-flow content's width and height match the specified explicit intrinsic size, rather than being sized as if they were empty.

This module also introduced the ability to define an aspect ratio for an element's box, meaning the browser can automatically adjust an element's dimensions to maintain a specified aspect ratio as long as one of the dimensions is automatically sized.

The logical properties and values module expanded the properties available in the box model and box sizing modules to include writing-mode-relative equivalents of the corresponding physical box model and intrinsic box sizing properties.

Reference

Properties

Data types and values

Note: The CSS box sizing module introduces the stretch and contain keywords as sizing values that have not yet been implemented on the box sizing properties.

Functions

Glossary terms

Guides

Understanding aspect ratios

Learn about the aspect-ratio property, discuss aspect ratios for replaced and non-replaced elements, and examine some common aspect ratio use cases.

Introduction to the CSS box model

Explains one of the fundamental concepts of CSS: the box model. This model defines how CSS lays out elements, including their content, padding, border, and margin areas.

Mastering margin collapsing

Sometimes, two adjacent margins are collapsed into one. This article describes the rules that govern when and why this happens, and how to control it.

Visual formatting model

Explains the visual formatting model.

Controlling ratios of flex items along the main axis

Explains intrinsic sizing as a precursor to understanding how to control the size and flexibility of flex items along the main axis using flex-grow, flex-shrink, and flex-basis.

Specifications

Specification
CSS Box Sizing Module Level 4
CSS Box Sizing Module Level 3

See also