Replaced Elements and Non-Replaced Elements#

Replaced elements, also known as replaceable elements, are elements whose display is not controlled by CSS. These elements are external objects and their appearance rendering is independent of CSS. Non-replaced elements, on the other hand, are elements whose content is directly rendered by CSS and presented to the client.

Replaced Elements#

• Replaced elements are elements whose content is not controlled by CSS rendering models. These elements generally have intrinsic dimensions such as width, height, aspect ratio, etc., and are referred to as replaced elements. For replaced elements, the browser determines the specific display content based on the element's tag and attributes.
• The content of replaced elements is not affected by the styles of the current document. CSS can affect the position of replaced elements, but it does not affect the content of the replaced elements themselves. For certain replaced elements, such as the <iframe> element, they may have their own stylesheets, but they do not inherit styles from the parent document.
• The only impact CSS has on replaced elements is that some properties support controlling the position or positioning of the element's content within its box. CSS may handle replaced elements differently in certain cases, such as calculating the margin and specific values of some auto properties. Some replaced elements have their own dimensions and baseline, which are used by certain CSS properties in calculations, such as vertical-align. Only replaced elements can have these inherent values.
• For example, the browser reads the image information and displays it based on the value of the src attribute of the <img> tag. The content of the image is determined by the src attribute, and CSS does not consider rendering the content of the image. Similarly, the <input> tag determines whether to display an input box or a radio button based on its type attribute.
• Common replaced elements include <iframe>, <video>, <embed>, <img>, etc. Some elements are treated as replaced elements in specific situations, such as <option>, <audio>, <canvas>, <object>, <applet>, <input>, etc.

Non-Replaced Elements#

• Non-replaced elements are elements whose content is contained within the document and can be controlled by CSS rendering.
• The content of non-replaced elements does not exceed the scope of CSS models. CSS considers the content of non-replaced elements during rendering.
• Most HTML elements are non-replaced elements, meaning that their content is directly presented to the browser, such as <div>, <p>, <h1>~<h6>, <table>, etc.

Daily Question#

References#