Почему getComputedStyle не учитывает разрушение полей?

Question

Что касается Javascript в браузере, window.getComputedStyle() Предполагается, что метод дает окончательные значения значений CSS-свойств, примененных к элементу. Согласно документации MDN, это означает "после того, как все расчеты выполнены".

Тем не менее, кажется, что "все расчеты" не включают в себя снижение маржи. В Firefox и Chrome (как минимум) инструкция getComptedStyle().marginBottom возвращает вычисленное значение до того, как будет рассчитан какой-либо спад маржи.

Например, рассмотрим следующий элемент:

<div style="margin: 10px 0 15px 0"></div>

Его верхнее и нижнее поля будут свернуты, потому что (примерно) его высота контента равна нулю (см. Рекомендацию W3C CSS2). Методы CSSOM вернут эти значения:

getComputedStyle().marginTop → 10px
getComputedStyle().marginBottom → 15px
getBoundingClientRect().top → {top of margin box} + marginTop
getBoundingClientRect().bottom → idem top

Но из-за сужения полей макет показывает отступ в 10px до ограничивающего прямоугольника клиента и запас в 5px после, т.е. max(0, marginBottom - marginTop),

Почему не getComputedStyle().marginBottom Возврат непосредственно 5px, реальное используемое значение "после того, как все вычисления были выполнены", вместо указанных 15px? Это W3C-рекомендуемое поведение? (Я ничего не видел об этом в документах w3.org.)

Это ошибка или особенность?

Answer 1

Я не вижу весь ваш код, но я думаю, что имя функции на самом деле, "getComputedStyle", с "u".

Опечатка? Может ли это быть так просто? Ты не был бы первым - включая меня.

Надеюсь, это поможет.

Answer 2

Существует различие между вычисляемыми и используемыми значениями. Более того, getComputedStyle()возвращает разрешенные значения, «которые могут быть либо вычисленным значением, либо используемым значением». Ссылка на МДН.

Что касается практической ценности множества состояний расчета, то я не знаю ни одного.