CODEWITHSUNDEEP
css
user2897377
user2897377

Reputation: 163

why is right margin of overconstrained element not behaving as expected

i am finding that the following code does not behave as expected acording to the css specification.

<style>
    div {width: 300px; border: 1px solid black;}
    .child{width: 400px; border: 1px solid red;}

</style>
<body>
<div class="container">
    <p class="child">some text</p>
</div>

</body>

the visual formatting model in the css specification: https://www.w3.org/TR/CSS22/visudet.html#blockwidth

gives the following constraint equation where the properties on the left refer to the child element of the containing block:

'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' = width of containing block

it further states: If all of the above have a computed value other than 'auto', the values are said to be "over-constrained" and one of the used values will have to be different from its computed value. If the 'direction' property of the containing block has the value 'ltr', the specified value of 'margin-right' is ignored and the value is calculated so as to make the equality true.

breaking down the statement from w3 spec

from w3: "If all of the above have a computed value other than 'auto', the values are said to be "over-constrained""

all of the properties from child pertaining to width have a value other than auto and the element is therefore overconstrained.

the equation is

0+ 1 + 0 + 400 + 0 + 1 + 0 = 300

from w3: "one of the used values will have to be different from its computed value." and "the specified value of 'margin-right' is ignored and the value is calculated so as to make the equality true."

so this would mean what we have to adjust margin-right to give the equation:

0+ 1 + 0 + 400 + 0 + 1 + -102 = 300

and we would expect to see a margin of -102px in chrome developer tools

however i get the following:

enter image description here

and there is no -ve right margin?

i basically would like to understand how the sizes chrome is calcualting for the child element is meeting the css specification, without assigining a -ve right margin.

Upvotes: 3

Views: 188

Answers (2)

Alohci
Alohci

Reputation: 83125

It is assigning used right margin of -102px. The margin shown in the screenshot is the computed value, not the used value.

If all of the above have a computed value other than 'auto', the values are said to be "over-constrained" and one of the used values will have to be different from its computed value. If the 'direction' property of the containing block has the value 'ltr', the specified value of 'margin-right' is ignored and the value is calculated so as to make the equality true.

See 6.1.2. Computed values and 6.1.3. Used values

Upvotes: 4

Maxim Key
Maxim Key

Reputation: 55

I think it's just a Chrome feature. Firefox, for example, in both cases treats margins as zero.

Upvotes: 0

Related Questions