In CSS, theintrinsic size of an element is the size it would have based purely on its content, without taking into account the effects of the layout context it appears in. This is the opposite of an element'sextrinsic size, which is determined by external constraints such as container size. An element's intrinsic sizes are represented by itsmin-content andmax-content sizes.

Inline elements are sized intrinsically. CSSbox model properties such asheight,width,block-size,inline-size,padding-block, andmargin-block have no impact on their layout (thoughmargin-inline andpadding-inline do affect spacing within a line).

For example, the minimum intrinsic size of the inline<span> element is the smallest size it would have if it were floated (with no other CSS box properties applied) in a container withinline-size: 0. The maximum intrinsic size is the opposite; it's the size the same<span> would have when placed in a container with an infiniteinline-size.

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 itsEXIF data. Image pixel density may also be set for images using thesrcset attribute. Note that if both mechanisms are used, thesrcset value is applied "over" the EXIF value.

Intrinsic sizes and how they are calculated are defined in theCSS box sizing module.

Minimum intrinsic size

To set an element according to its minimum intrinsic size, set theinline-size (orwidth in horizontal writing modes, like English and Hebrew) tomin-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>Text wraps, making the element only as wide as its longest word.</p>

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 overflows its container. The keyword valuemax-content sets this behavior.

<p>Element grows as text doesn't wrap.</p><p>  This paragraph may be wider than the width of the entire page and yet it won't  wrap because <code>width: max-content</code> is set. It therefore may overflow  its container.</p>

p {  width: max-content;  background-color: palegoldenrod;}

See also

• Related glossary terms:
  • Extrinsic size
• CSSmin-content,max-content, andfit-content sizing keywords
• interpolate-size
• aspect-ratio
• calc-size()
• CSS box sizing module
• CSS Box Sizing Module Level 3 specification