As Temani’s answer says, the essential difference is between the computed value of the right margin, which is 0px and the used value, which is 300px in your example.
What is confusing is what are the “computed” values depicted in the dev tools.
The Computed value of a property has a very particular meaning. When a child element inherits the value of a property, that Computed value becomes the child’s Specified value of that same property. So, if the computed value for width of a block element is, say, 50% of its container, and its block child has width:inherit then that child will be 50% of 50% (= 25%) of the outer container, rather than inheriting the pixel value of the parent.
html {
background-color:white;
}
* { padding-top: 10px; padding-bottom:10px; margin:0; }
body {
width: 300px;
background-color:lightyellow;
}
div {
width: 50%;
background-color:lightgreen;
}
p {
width:inherit;
background-color:lightblue;
height:50px;
}<div>
<p>Hello World</p>
</div>However, there is a CSSOM method window.getComputedStyle(). For backward compatibility reasons sometimes this needs to return the pixel value rather than the true Computed value.
For that reason, CSSOM defines another value, called the Resolved value. getComputedStyle() then, despite its name returns the Resolved values of the properties, not their Computed values.
Now, the CSSOM spec says that for width, margin and some other properties, the Resolved value is the Used value, where for most other properties, it’s the Computed value. This allows getComputedStyle() to maintain its backward compatibility, while implementing the inheritable computed values correctly.
However, it turns out that browsers don’t implement this faithfully. If they did, then in your example, the Resolved value of margin-right would take into account the adjustment to satisfy the equality and return 300px. In fact, what is actually returned is the Computed value converted to pixels. i.e. The value before the adjustment for the equality.
This discrepancy is documented in a currently open CSSOM issue: Used value of margin properties #2328.
The values shown in the Computed tab of dev tools match the values returned by getComputedStyle(). Not always the computed value, not always the used value, and for margins, and not even the resolved value as it is currently defined.