Want to share your CSS expertise with others? Apply to the MDN Fellowship by April 1! http://mzl.la/MDNFellowship

mozilla

Revision 396165 of Replaced element

  • Revision slug: Web/CSS/Replaced_element
  • Revision title: Replaced element
  • Revision id: 396165
  • Created:
  • Creator: Sheppy
  • Is current revision? No
  • Comment CSS/Replaced_element Web/CSS/Replaced_element

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

<div>{{CSSRef()}}</div>

<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