In CSS, the intrinsic size of an element is the size it would be based on its content, if no external factors were applied to it. For example, inline elements are sized intrinsically:
height, and vertical margin and padding have no impact, though horizontal margin and padding do.
How intrinsic sizes are calculated is defined in the CSS Intrinsic and Extrinsic Sizing Specification.
Intrinsic sizing takes into account the
max-content size of an element. For text the
min-content size would be if the text wrapped as small as it can in the inline direction without causing an overflow, doing as much soft-wrapping as possible. For a box containing a string of text, the
min-content size would be defined by the longest word. The keyword value of
min-content for the
width property will size an element according to the
max-content size is the opposite — in the case of text, this would have the text display as wide as possible, doing no soft-wrapping, even if an overflow was caused. The keyword value
max-content exposes this behavior.
For images the intrinsic size has the same meaning — it is the size that an image would be displayed if no CSS was applied to change the rendering. By default images are assumed to have a "1x" pixel density (1 device pixel = 1 CSS pixel) and so the intrinsic size is simply the pixel height and width. The intrinsic image size and resolution can be explicitly specified in the EXIF data. The intrinsic 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).