Замещаемые элементы и где они обитают

Принято говорить, что замещаемые элементы - это те элементы, на отображение которых мы не можем влиять из css.

В спецификации html написано, что:

"Следующие элементы могут быть замещаемыми: audio, canvas, embed, iframe, img, input, object, и video."

В спецификации css чуть более развернуто:

"Элемент, содержимое которого выходит за рамки модели форматирования CSS, например изображение или iframe. Так, содержимое img заменяется изображением, которое обозначает его атрибут src."

Замещаемые элементы имеют собственные размеры (natural dimensions). Например, растровое изображение имеет собственную ширину и собственную высоту, указанные в абсолютных единицах (из которых, очевидно, можно определить собственное соотношение (ratio)).

Также, замещаемый элемент может и не иметь одного или нескольких, или всех собственных размеров.

Объекты, добавляемые с помощью CSS-свойства content являются анонимными замещаемыми элементами.
Анонимным в css называется то, к чему нельзя напрямую обратится.

Важно знать, что элемент замещаемый и какие именно собственные размеры у него есть, чтобы понять, как он будет отображаться. В разделе про расчёт ширины и отступов, который я постепенно перевожу (см. предыдущие посты), замещаемые элементы рассматриваются отдельно.

Версия поста в блоге.

#css_display

Теперь, в догонку к предыдущему посту, еще один, опирающийся на него.

Строчные замещаемые элементы

Если вычисленное значение margin-left или margin-right равно auto, то их используемое значение становится равным 0.

Если height и width имеют вычисленные значения auto и элемент также имеет собственную (natural) ширину, тогда эта ширина является используемым значением width.

Если и height, и width имеют вычисленные значения auto, а элемент не имеет собственной ширины, но имеет собственную высоту и собственное соотношение, или если ширина имеет вычисленное значение auto, а высота нет, и элемент имеет собственное соотношение, тогда ширина вычисляется как:

(used height) * (natural ratio);

Если для высоты и ширины вычисленные значения auto, и элемент имеет собственное соотношение, но не имеет внутренней высоты или ширины, то используемое значение ширины не определено в CSS 2. Однако предполагается, что, если ширина содержащего блока не зависит от ширины замещаемого элемента, то есть используемое значение ширины вычисляется из уравнения ограничения, используемого для незамещенных блочных элементов в нормальном потоке.

Если ширина имеет вычисленное значение auto, и элемент имеет собственную ширину, тогда эта собственная ширина является используемым значением ширины.

Если ширина имеет вычисленное значение auto, но ни одно из вышеперечисленных условий не выполняется, то используемое значение ширины становится 300 пикселей.

Если 300 пикселей слишком широкие для устройства, UA должны использовать ширину самого большого прямоугольника, который имеет соотношение 2: 1 и подходит для устройства.

Например, это iframe'ы. Будучи вставленными на страницу без стилей, они имеют ширину 300 и высоту 150 пикселей.

Источник - https://www.w3.org/TR/CSS2/visudet.html#inline-replaced-width

Версия поста в блоге.

#css_display