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
aspect-ratio
box-sizing
contain-intrinsic-block-size
contain-intrinsic-height
contain-intrinsic-inline-size
contain-intrinsic-size
contain-intrinsic-width
height
max-height
max-width
min-height
min-width
width
Note:
The CSS box sizing module introduces the min-intrinsic-sizing
property that has not yet been implemented.
Data types and values
<ratio>
data typemin-content
valuemax-content
valuefit-content
valuefit-content()
function
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
, andflex-basis
.
Related concepts
- CSS logical properties module
min-inline-size
block-size
inline-size
max-block-size
max-inline-size
min-block-size
min-inline-size
margin-block
margin-inline
padding-block
padding-inline
border-block
border-inline
contain-intrinsic-block-size
contain-intrinsic-inline-size
overflow-block
overflow-inline
overscroll-behavior-block
overscroll-behavior-inline
- CSS box model module
margin
shorthandmargin-bottom
margin-left
margin-right
margin-top
margin-trim
padding
shorthandpadding-bottom
padding-left
padding-right
padding-top
- CSS backgrounds and borders module
border
shorthandborder-width
shorthandborder-bottom-width
border-left-width
border-right-width
border-top-width
- CSS overflow module
- CSS grid layout module
- CSS flexible box layout module
Specifications
Specification |
---|
CSS Box Sizing Module Level 4 |
CSS Box Sizing Module Level 3 |
See also
- CSS display module
- CSS flex layout module
- CSS grid layout module
- CSS positioned layout module
- CSS fragmentation module