= CSS non-replaced element
{c}
A <CSS non-replaced element> has content formatted through the normal CSS document layout machinery, rather than supplied as replaced external content. A paragraph containing text and child elements is a typical example. The classification is separate from whether the element participates as inline or block-level content.<Visual formatting model in CSS 2.2 by W3C>[§9.2, box generation and non-replaced elements]{ref}
For example, text inside a paragraph can wrap into several <CSS line boxes> as the available width changes. Its descendant text and elements contribute to layout. Adding a background image does not by itself turn that paragraph into a <CSS replaced element>; the paragraph's content is still formatted by CSS.
Applicability of sizing properties then depends on the generated box. On an ordinary non-replaced inline span, declaring `width: 100px` does not make its inline box a fixed-width block. Changing its display to an inline-block or an applicable block box changes the sizing rules, even though the underlying element remains non-replaced.<CSS Box Sizing Module Level 3 by World Wide Web Consortium>[§3.1.1, applicability of preferred-size properties]{ref}
This distinction helps explain why two elements with the same width declaration can behave differently. Whether content is replaced, the outer display role and the formatting context must all be specified before treating a declaration as a <CSS used value>.
Back to article page
