Something went wrong. Try again.
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140{ "format": 1, "function": "width", "sections": [ "https://www.w3.org/TR/CSS21/visudet.html#blockwidth", "https://www.w3.org/TR/CSS21/visudet.html#min-max-widths", "https://www.w3.org/TR/CSS21/visudet.html#containing-block-details", "https://www.w3.org/TR/CSS21/visuren.html#block-formatting" ], "inputs": [ { "name": "width", "type": "dom::computed::ComputedLength", "source": { "kind": "computed-style", "property": "width", "of": "self" }, "why": "If 'width' is not 'auto' and ..." }, { "name": "margin_left", "type": "dom::computed::ComputedLength", "source": { "kind": "computed-style", "property": "margin-left", "of": "self" }, "why": "If there is exactly one value specified as 'auto', its used value follows from the equality." }, { "name": "margin_right", "type": "dom::computed::ComputedLength", "source": { "kind": "computed-style", "property": "margin-right", "of": "self" }, "why": "If both 'margin-left' and 'margin-right' are 'auto', their used values are equal." }, { "name": "border_left_width", "type": "f64", "source": { "kind": "computed-style", "property": "border-left-width", "of": "self" }, "why": "'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' = width of containing block" }, { "name": "padding_left", "type": "f64", "source": { "kind": "computed-style", "property": "padding-left", "of": "self" }, "why": "'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' = width of containing block" }, { "name": "padding_right", "type": "f64", "source": { "kind": "computed-style", "property": "padding-right", "of": "self" }, "why": "'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' = width of containing block" }, { "name": "border_right_width", "type": "f64", "source": { "kind": "computed-style", "property": "border-right-width", "of": "self" }, "why": "'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' = width of containing block" }, { "name": "containing_block_width", "type": "f64", "source": { "kind": "answer", "function": "containing_block", "output": "rect.width" }, "why": "width of containing block" }, { "name": "containing_block_direction", "type": "String", "source": { "kind": "computed-style", "property": "direction", "of": "containing-block" }, "why": "If the 'direction' property of the containing block has the value 'ltr', the specified value of 'margin-right' is ignored ... If the value of 'direction' is 'rtl', this happens to 'margin-left' instead." }, { "name": "min_width", "type": "dom::computed::ComputedLength", "source": { "kind": "computed-style", "property": "min-width", "of": "self" }, "why": "If the resulting width is smaller than 'min-width', the rules above are applied again, but this time using the value of 'min-width' as the computed value for 'width'." }, { "name": "max_width", "type": "dom::computed::ComputedLength", "source": { "kind": "computed-style", "property": "max-width", "of": "self" }, "why": "If the tentative used width is greater than 'max-width', the rules above are applied again, but this time using the computed value of 'max-width' as the computed value for 'width'." } ], "outputs": [ { "name": "used_width", "type": "f64", "why": "the box's used content-box width, whatever its 'box-sizing'; the engine puts it on the 1/64 px grid, adds the horizontal padding and border for the border box, and lays the box's children out in that content width" }, { "name": "used_margin_left", "type": "f64", "why": "the used 'margin-left'; the engine places the box's border box this far from the containing block's left content edge" }, { "name": "used_margin_right", "type": "f64", "why": "the used 'margin-right'; the engine does not place anything by it" } ]}