= CSS replaced element
{c}
A <CSS replaced element> represents content whose internal rendering lies outside the ordinary CSS formatting of the element's descendants. An image element displaying its image is a standard example. CSS can size and position the element's surrounding box, while the image's own dimensions or aspect ratio can help determine that size.<Visual formatting model details in CSS 2.2 by W3C>[§§10.3.2 and 10.6.2, replaced-element widths and heights]{ref}
Suppose an image has intrinsic dimensions $800\times400$ and no extra padding or borders. With `width: 200px; height: auto`, preserving its intrinsic ratio gives a content height of 100 <CSS pixels>. The source image's pixel counts and the rendered CSS dimensions therefore have distinct roles. Choosing both dimensions explicitly can instead impose a different box ratio.
Replaced content is not synonymous with block layout. The same image can participate as an inline-level box in a line or be given a block-level display role. The distinction also matters to <CSS vertical alignment>, because an inline replaced box is aligned as a unit rather than as a run of ordinary text.
A broken or unavailable image can have specified fallback behavior, so an element's tag name alone is not a complete description of every rendering state. For a concrete sizing calculation, state what content is being replaced, which intrinsic information is available and which CSS dimensions constrain the resulting box.
Back to article page
