Why doesn't getComputedStyle account for margin loss?

Question

As for Javascript in the browser, the window.getComputedStyle() method of the window.getComputedStyle() should window.getComputedStyle() last used CSS property values ​​applied to the element. According to the MDN documentation , this means "after all the calculations have been completed."

However, it seems that “all settlements” do not include margin reduction. In Firefox and Chrome (at least), the getComputedStyle().marginBottom returns the calculated value before any getComputedStyle().marginBottom fields are getComputedStyle().marginBottom .

For example, consider the following element:

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

Its top and bottom margins will be collapsed because (approximately) its content height is zero (see W3C CSS2 Recommendation ). CSSOM methods will return these values:

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

But due to the narrowing of the fields, the layout shows max(0, marginBottom - marginTop) before the bounding client rectangle and max(0, marginBottom - marginTop) after, i.e. max(0, marginBottom - marginTop) .

Why getComputedStyle().marginBottom directly return 5px, the actual value used is “after all calculations have been completed”, instead of the specified 15px? Is this a W3C recommended behavior? (I did not see anything about this in the w3.org docs.)

Is this a bug or a feature?

Answer 1

I do not see all your code, but I think that the function name is actually "getComputedStyle" with "u".

Typo? Is it really that easy? You would not be the first - I turned on myself.

Hoping this helps.