Replaced element

  • Revision slug: CSS/Replaced_element
  • Revision title: Replaced element
  • Revision id: 308179
  • Created:
  • Creator: teoli
  • Is current revision? No
  • Comment

Revision Content

{{CSSRef()}}

Summary

In CSS, a replaced element is an element whose representation is outside the scope of CSS. These are kind of external objects whose representation is independant of the CSS. Typical replaced elements are {{HTMLElement("image")}}, {{HTMLElement("object")}}, {{HTMLElement("video")}} or forms element like {{HTMLElement("textarea")}}, {{HTMLElement("input")}}. Some elements, like {{HTMLElement("audio")}} or {{HTMLElement("canvas")}} are replaced elements only in specific cases. Object inserted using the CSS {{cssxref("content")}} properties are anonymous replaced elements.

CSS handled replaced elements specifically in some cases, like when calculating margins and some auto values.

Note that some replaced elements, but not all, have intrinsic dimensions or a defined baseline, which is used by some CSS properties like {{cssxref("vertical-align")}}.

See also

  • {{CSS_key_concepts()}}

Revision Source

<p>{{CSSRef()}}</p>
<h2 id="Summary">Summary</h2>
<p>In CSS, a <strong>replaced element</strong> is an element whose representation is outside the scope of CSS. These are kind of external objects whose representation is independant of the CSS. Typical replaced elements are {{HTMLElement("image")}}, {{HTMLElement("object")}}, {{HTMLElement("video")}} or forms element like {{HTMLElement("textarea")}}, {{HTMLElement("input")}}. Some elements, like {{HTMLElement("audio")}} or {{HTMLElement("canvas")}} are replaced elements only in specific cases. Object inserted using the CSS {{cssxref("content")}} properties are <em>anonymous replaced elements</em>.</p>
<p>CSS handled replaced elements specifically in some cases, like when calculating margins and some <code>auto</code> values.</p>
<p>Note that some replaced elements, but not all, have intrinsic dimensions or a defined baseline, which is used by some CSS properties like {{cssxref("vertical-align")}}.</p>
<h2 id="See_also">See also</h2>
<ul>
  <li>{{CSS_key_concepts()}}</li>
</ul>
Revert to this revision