Intrinsic size
In CSS, the intrinsic size of an element is the size it would be based purely on its content without taking into account the effects of the context it appears in. For example, the sizing applied by CSS box model properties. An element's intrinsic sizes are represented by its min-content
and max-content
sizes.
Inline elements are sized intrinsically: sizing and box properties including height
, width
, block-size
, inline-size
, and padding-block
and margin-block
have no impact on them ( though margin-inline
and padding-inline
do).
For example, the minimum intrinsic size of the inline <span>
element is the minimum size it would have if it was floated (with no other CSS box properties applied), inside a container with an inline-size of 0px
. The maximum intrinsic size is the opposite. It is the size the same <span>
would have if its container's inline size were infinite.
Intrinsic size has the same meaning for images as for text — the size at which the images are displayed if no CSS is applied to change the rendering.
Pixel density and resolution affect intrinsic size. By default, images are assumed to have a "1x" pixel density (1 device pixel = 1 CSS pixel), in which case the intrinsic size is simply the pixel height and width. An image's intrinsic size and resolution can be explicitly specified in its EXIF data. Image pixel density may also be set for images using the srcset
attribute. Note that, if both mechanisms are used, the srcset
value is applied "over" the EXIF value.
Intrinsic sizes and how they are calculated are defined in the CSS sizing module.
minimum intrinsic size
To set an element according to its minimum intrinsic size, set the inline-size
(or width
in horizontal writing modes, like English and Hebrew) to min-content
. This sets the element to the size it would be if the text was wrapped as small as possible in the inline direction without causing an overflow, with as much soft-wrapping as possible. For a box containing a string of text, the minimum intrinsic size would be defined by the longest word.
p {
inline-size: min-content;
background-color: palegoldenrod;
}
maximum intrinsic size
The maximum intrinsic size is the opposite. It is the element's size if the container's inline size were infinite. Text content would display as wide as possible, with no soft-wrapping, even if it overflowed its container. The keyword value max-content
sets this behavior.
p {
width: max-content;
background-color: palegoldenrod;
}
Extrinsic sizing
The opposite of intrinsic size is extrinsic size, which is based on the context of an element, without regard for its contents. Extrinsic sizing is determined by box model property values. With extrinsic sizing, percentages specify the size of a box with respect to the box's containing block.
See also
- CSS
min-content
,max-content
, andfit-content
property values. interpolate-size
aspect-ratio
calc-size()
- CSS box sizing module
- CSS sizing specification: intrinsic sizes