Understanding Display Behavior for Replaced vs. Non-Replaced Elements in CSS
In CSS, elements are classified as replaced or non-replaced. Replaced elements have their content defined outside CSS (e.g., <img>, <video>, <iframe>, <input>), while non-replaced elements have content defined in the DOM and styled with CSS. The display property affects them differently.
Default display values differ: most non-replaced elements default to
blockorinline, while replaced elements often behave likeinline-block.Replaced elements respect width and height more strictly; setting
display: blockorinline-blockaffects their box model predictably.Non-replaced elements can contain children; replaced elements generally cannot, so
display: flexorgridon a replaced element may have limited effect.Vertical alignment behaves differently: replaced elements align to the baseline differently than inline non-replaced elements, especially when mixed in text.
In this example, the div is a non-replaced element styled as inline-block, allowing it to contain content. The image is a replaced element, and its dimensions are handled by the browser, respecting width/height and display rules.
Understand whether an element is replaced or non-replaced to predict how
displayvalues will behave.Use
inline-blockorblockfor replaced elements when you need predictable sizing.Use
flexorgridonly on non-replaced containers to align children.Remember that some CSS properties have limited effect on replaced elements (e.g.,
paddingaffects layout differently than on non-replaced elements).