Skip to main content Skip to docs navigation
View on GitHub

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.

On this page

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.

css 
                                    
                                        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.

css 
                                    
                                        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

Updated on April 20, 2024 by Datarist.