what is a non-replaced inline element?

Question

Encountered the following while reading the height property of CSS2 specification:

Applies to: all elements but non-replaced inline elements, table columns, and column groups

I understand what replaced element(<img>) or inline element(<button>, <a>) are, but having trouble finding out examples of non-replaced inline elements.

Answer 1

For most practical purposes, it is best to read “replaced” as “embedding”. So “non-replaced element” is just an element that is rendered as such, instead of causing some external content to appear in its place.

The expression “non-replaced inline element” has no definition of its own: it simply refers to any element that is both a non−replaced element and an inline element. Such as <a>. Most elements in HTML are non-replaced. A non-replaced element is simply an element that is not a replaced element.

However, in CSS specifications, there are just general characterizations the concept “replaced element”, not any definitive list of such elements. This is understandable, since HTML evolves rather independently of CSS.

The concept has somewhat changed over time. The CSS 1 spec said: “In HTML, IMG, INPUT, TEXTAREA, SELECT, and OBJECT elements can be examples of replaced elements.” In newer specs, form fields are not included any more. This is reflected in the HTML5 draft, where the Rendering section explicitly lists form controls under Non-replaced elements. The only replaced elements, according to it, are those that embed external content, such as an image, video, applet, or HTML5 canvas into an HTML document – except that the revamped menu element is mentioned too (it is expected to be implement in a manner that echoes browser controls, so it sort-of embeds external content too).

This change reflects browser development. Early browsers implemented form fields using system routines in a manner that was immune to anything in CSS, and there are still some remains of such approaches, but nowadays form fields can mostly be formatted with CSS, so they have effectively changed from replaced to non-replaced elements.

Answer 2

David Baron discusses this on his website here.

There are two types of inline elements: replaced inline elements and non-replaced inline elements. In general, non-replaced elements are those whose content is contained in the document, whereas replaced-elements are those whose content is outside of the document. For example, in the code:

Visit the <a href="http://www.w3.org/">World Wide Web Consortium</a> to learn about... the content of the a element is "World Wide Web Consortium". Replaced elements are those where the content comes from some external source, for example, an object or img element.

However, as far as the inline box model is concerned, the definitions are as described above except that elements with display types inline-table and inline-block (the latter is a proposed type for CSS3 to accommodate form elements) are considered replaced elements.

Good examples of non-replaced inline elements are span, strong, i, b, em, etc.