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

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.

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.