Do replaced elements (like <img>, <input>) follow the same box model rules?
Understanding Replaced Elements in the CSS Box Model
Replaced elements are HTML elements whose content is not directly controlled by CSS, but by external sources—such as an image file, video, or form control. Examples include <img>, <input>, <video>, <iframe>, and <object>.
While replaced elements still participate in the CSS box model, their intrinsic (natural) size often determines their width and height unless explicitly overridden by CSS. The browser replaces their content with an external resource, which defines part of their rendering behavior.
- 1
They generate a box like any other element with content, padding, border, and margin.
- 2
Their intrinsic dimensions (like an image's natural width and height) determine their box size if CSS doesn’t override it.
- 3
You can set width, height, padding, border, and margin normally — these affect layout as expected.
- 4
Their content box corresponds to the replaced content area (e.g., the actual image).
In this example, the image behaves like a block-level box by default, respecting padding, borders, and margins. Its intrinsic image content defines the base box size, which CSS can modify.
- 1
Replaced elements don’t have descendant content — their visual content comes from an external source.
- 2
Intrinsic ratio and object-fit/object-position can control how their content is displayed within the box.
- 3
They can behave as inline, block, or inline-block depending on the element type and CSS display property.