Extrinsic size

In CSS, the extrinsic size of an element is determined by its layout context, that is, by constraints imposed from outside the element, without regard for its contents. This is the opposite of an element's intrinsic size, which is based on its content.

Extrinsic sizing occurs when you explicitly set or constrain the size of an element using CSS box model properties such as width, height, block-size, inline-size, max-width, and min-height. For example, when you set width: 200px, you're specifying an extrinsic size.

Percentage values are also extrinsic; they're calculated relative to the element's containing block. For example, width: 50% means the width of the element will be 50% of the width of its containing block, regardless of the content inside the element.

Block-level elements are sized extrinsically. When a width isn't specified, the block element's default width is auto, which resolves to 100% width of its containing block.