| 10.1 Definition of "containing block" |
|---|
| Containing block for relative positioned elements is nearest block-level ancestor |
|
| If the element's position is 'relative', the containing block is formed by the content edge of the nearest block-level ancestor box. |
|
| Containing block for relative positioned elements is nearest table cell ancestor |
|
| If the element's position is 'relative', the containing block is formed by the content edge of the nearest table cell ancestor box. |
|
| Containing block for relative positioned elements is nearest inline-block ancestor |
|
| If the element's position is 'relative', the containing block is formed by the content edge of the nearest inline-block ancestor box. |
|
| Containing block for static positioned elements is nearest block-level ancestor |
|
| If the element's position is 'static', the containing block is formed by the content edge of the nearest block-level ancestor box. |
|
| Containing block for static positioned elements is nearest table cell ancestor |
|
| If the element's position is 'static', the containing block is formed by the content edge of the nearest table cell ancestor box. |
|
| Containing block for static positioned elements is nearest inline-block ancestor |
|
| If the element's position is 'static', the containing block is formed by the content edge of the nearest inline-block ancestor box. |
|
| Initial containing block for fixed positioned elements |
|
| The containing block is established by the viewport when an element uses fixed positioning. |
|
| Containing block for absolute positioned elements is nearest positioned (absolute) ancestor |
|
| If the element has 'position: absolute', the containing block is established by the nearest positioned ancestor. |
|
| Containing block for absolute positioned elements is nearest positioned (relative) ancestor |
|
| If the element has 'position: absolute', the containing block is established by the nearest positioned ancestor. |
|
| Containing block for absolute positioned elements is nearest positioned (fixed) ancestor |
|
| If the element has 'position: absolute', the containing block is established by the nearest positioned ancestor. |
|
| Containing Blocks - Inline-level elements position based on left-to-right direction and parent element is relative |
|
| If the ancestor is inline-level, positioned absolute, and direction is left-to-right, the top/left of the containing block determines the top/left padding edges of the first box generated by the ancestor. |
|
| Containing Blocks - Inline-level elements position based on left-to-right direction and parent element is absolute |
|
| If the ancestor is inline-level, positioned absolute, and direction is left-to-right, the top/left of the containing block determines the top/left padding edges of the first box generated by the ancestor. |
|
| Containing Blocks - Inline-level elements position based on left-to-right direction and parent element is fixed |
|
| If the ancestor is inline-level, positioned absolute, and direction is left-to-right, the top/left of the containing block determines the top/left padding edges of the first box generated by the ancestor. |
|
| Containing Blocks - Block-level elements position based on left-to-right direction and parent element is relative |
|
| The containing block is formed by the padding edge for block-level elements. |
|
| Containing Blocks - Block-level elements position based on left-to-right direction and parent element is absolute |
|
| The containing block is formed by the padding edge for block-level elements. |
|
| Containing Blocks - Block-level elements position based on left-to-right direction and parent element is fixed |
|
| The containing block is formed by the padding edge for block-level elements. |
|
| Containing Blocks - Fall back to Initial containing block |
|
| When there are no positioned ancestors then the initial containing block is used. |
|
| Containing block and absolutely positioned element in paged media positioned off first page |
P |
| An absolutely positioned element positioned beyond the boundaries of the page being laid out can be omitted, rendered on the current page or on a following page. |
|
| page-break-inside:auto |
P |
| The 'auto' value of the 'page-break-inside' property neither forces nor forbids a page break inside the box. |
|
| Paged Media Canvas Background |
P |
| For documents in the html namespace, a background on 'html' will cover the page area but not the margin area. |
|
| Paged Media Body Background |
P |
| For documents in the html namespace, a background on 'body' will cover the page area. |
|
| Containing block for fixed positioning |
|
| Containing block for absolute positioning |
|
| Containing block for absolute positioning |
|
| Containing block for absolute positioning |
|
| Containing block for absolute positioning |
|
| Containing block for absolute positioning |
|
| Containing block for absolute positioning |
|
| Containing block for absolute positioning |
|
| Containing block for absolute positioning |
|
| 10.3.7 Absolutely positioned, non-replaced elements |
|---|
| Solving for 'right' on absolutely positioned non-replaced elements |
A |
| When direction is left-to-right and 'left', 'width' and 'right' are 'auto', the width becomes shrink-to-fit and then solve for 'right'. |
|
| Solving for 'left' on absolutely positioned non-replaced elements |
A |
| When direction is right-to-left and 'left', 'width' and 'right' are 'auto', the width becomes shrink-to-fit and then solve for 'left'. |
|
| Absolutely positioned non-replaced elements with 'margin-left' and 'margin-right' set to 'auto' |
A |
| When 'left', 'width' and 'right' are not 'auto', the width becomes shrink-to-fit and set 'margin-left' and 'margin-right' to equal values. |
|
| Absolutely positioned non-replaced elements when both 'margin-left' and 'margin-right' are set to 'auto' |
A |
| When direction is left-to-right and 'left', 'width' and 'right' are not 'auto', the width becomes shrink-to-fit and then solve for 'margin-right'. |
|
| Absolutely positioned non-replaced element when only 'margin-right' is 'auto' |
A |
| When direction is left-to-right and 'left', 'width' and 'right' are not 'auto', the width becomes shrink-to-fit and then solve for 'margin-right'. |
|
| Solved for 'left' when absolutely positioned non-replaced elements has 'left' and 'width' as 'auto' |
A |
| When 'left' and 'width' are 'auto' and 'right' is not 'auto' element solves for 'left'. |
|
| Absolutely positioned non-replaced elements when 'left' and 'right' are 'auto', 'width' is not 'auto' and 'direction' is left-to-right |
A |
| When 'direction' is left-to-right and 'left' and 'right' are 'auto' and 'width' is not 'auto', solve for 'right'. |
|
| Absolutely positioned non-replaced elements when 'left' and 'right' are 'auto', 'width' is not 'auto' and 'direction' is right-to-left |
A |
| When 'direction' is right-to-left and 'left' and 'right' are 'auto' and 'width' is not 'auto', solve for 'left'. |
|
| Solved for 'right' when absolutely positioned non-replaced elements has 'right' and 'width' as 'auto' |
A |
| When 'right' and 'width' are 'auto' and 'left' is not 'auto' element solves for 'right'. |
|
| Solved for 'width' when absolutely positioned non-replaced elements has 'left' and 'right' not set to 'auto' |
|
| When 'width' is 'auto' and 'left' and 'right' are not 'auto' element solves for 'width'. |
|
| Solved for 'right' when absolutely positioned non-replaced elements has 'left' and 'width' not set to 'auto' |
A |
| When 'right' is 'auto' and 'width' and 'left' are not 'auto' element solves for 'right'. |
|
| 10.3.8 Absolutely positioned, replaced elements |
|---|
| Absolute replaced elements and 'auto' specified for 'margin-left', 'margin-right' and intrinsic width |
G |
| Computed value of 'auto' for 'margin-left' or margin-right' on absolute replaced elements becomes a used value of '0'. The intrinsic width is also used if 'height' and 'width' are 'auto'. |
|
| Absolute replaced elements and 'auto' specified for 'margin-left', 'margin-right' and percentage intrinsic width |
G |
| Percentage intrinsic widths are evaluated against the containing block's width. |
|
| Absolute replaced elements and 'auto' specified for 'margin-left', 'margin-right' and percentage intrinsic width that cannot be resolved |
G |
| Percentage intrinsic widths are evaluated against the containing block's width unless the containing block width depends on the element. |
|
| Absolute replaced elements with 'direction' as left-to-right, 'auto' specified for 'margin-left', 'margin-right', 'left', 'right' and intrinsic width |
G |
| Computed value of 'auto' for 'margin-left' or margin-right' on absolute replaced elements becomes a used value of '0'. The intrinsic width is also used if 'height' and 'width' are 'auto'. |
|
| Absolute replaced elements with 'direction' as left-to-right, 'auto' specified for 'margin-left', 'margin-right', 'left', 'right' and percentage intrinsic width |
G |
| Percentage intrinsic widths are evaluated against the containing block's width. |
|
| Absolute replaced elements with 'direction' as left-to-right, 'auto' specified for 'margin-left', 'margin-right', 'left', 'right' and percentage intrinsic width that cannot be resolved |
G |
| Percentage intrinsic widths are evaluated against the containing block's width unless the containing block width depends on the element. |
|
| Absolute replaced elements with 'direction' as right-to-left, 'auto' specified for 'margin-left', 'margin-right', 'left', 'right' and intrinsic width |
G |
| Computed value of 'auto' for 'margin-left' or margin-right' on absolute replaced elements becomes a used value of '0'. The intrinsic width is also used if 'height' and 'width' are 'auto'. |
|
| Absolute replaced elements with 'direction' as right-to-left, 'auto' specified for 'margin-left', 'margin-right', 'left', 'right' and percentage intrinsic width |
G |
| Percentage intrinsic widths are evaluated against the containing block's width. |
|
| Absolute replaced elements with 'direction' as right-to-left, 'auto' specified for 'margin-left', 'margin-right', 'left', 'right' and percentage intrinsic width that cannot be resolved |
G |
| Percentage intrinsic widths are evaluated against the containing block's width unless the containing block width depends on the element. |
|
| Absolute replaced elements with 'direction' as left-to-right, 'auto' specified for 'margin-left', 'margin-right', 'right' and intrinsic width |
G |
| Computed value of 'auto' for 'margin-left' or margin-right' on absolute replaced elements becomes a used value of '0'. The intrinsic width is also used if 'height' and 'width' are 'auto'. |
|
| Absolute replaced elements with 'direction' as left-to-right, 'auto' specified for 'margin-left', 'margin-right', 'right' and percentage intrinsic width |
G |
| Percentage intrinsic widths are evaluated against the containing block's width. |
|
| Absolute replaced elements with 'direction' as left-to-right, 'auto' specified for 'margin-left', 'margin-right', 'right' and percentage intrinsic width that cannot be resolved |
G |
| Percentage intrinsic widths are evaluated against the containing block's width unless the containing block width depends on the element. |
|
| Absolute replaced elements with 'direction' as right-to-left, 'auto' specified for 'margin-left', 'margin-right', 'right' and intrinsic width |
G |
| Computed value of 'auto' for 'margin-left' or margin-right' on absolute replaced elements becomes a used value of '0'. The intrinsic width is also used if 'height' and 'width' are 'auto'. |
|
| Absolute replaced elements with 'direction' as right-to-left, 'auto' specified for 'margin-left', 'margin-right', 'right' and percentage intrinsic width |
G |
| Percentage intrinsic widths are evaluated against the containing block's width. |
|
| Absolute replaced elements with 'direction' as right-to-left, 'auto' specified for 'margin-left', 'margin-right', 'right' and percentage intrinsic width that cannot be resolved |
G |
| Percentage intrinsic widths are evaluated against the containing block's width unless the containing block width depends on the element. |
|
| Absolute replaced elements with 'direction' as left-to-right, 'auto' specified for 'margin-left', 'margin-right' and intrinsic width |
G |
| Computed value of 'auto' for 'margin-left' or margin-right' on absolute replaced elements becomes a used value of '0'. The intrinsic width is also used if 'height' and 'width' are 'auto'. |
|
| Absolute replaced elements with 'direction' as left-to-right, 'auto' specified for 'margin-left', 'margin-right' and percentage intrinsic width |
G |
| Percentage intrinsic widths are evaluated against the containing block's width. |
|
| Absolute replaced elements with 'direction' as left-to-right, 'auto' specified for 'margin-left', 'margin-right' and percentage intrinsic width that cannot be resolved |
G |
| Percentage intrinsic widths are evaluated against the containing block's width unless the containing block width depends on the element. |
|
| Absolute replaced elements with 'direction' as right-to-left, 'auto' specified for 'margin-left', 'margin-right' and intrinsic width |
G |
| Computed value of 'auto' for 'margin-left' or margin-right' on absolute replaced elements becomes a used value of '0'. The intrinsic width is also used if 'height' and 'width' are 'auto'. |
|
| Absolute replaced elements with 'direction' as right-to-left, 'auto' specified for 'margin-left', 'margin-right' and percentage intrinsic width |
G |
| Percentage intrinsic widths are evaluated against the containing block's width. |
|
| Absolute replaced elements with 'direction' as right-to-left, 'auto' specified for 'margin-left', 'margin-right' and percentage intrinsic width that cannot be resolved |
G |
| Percentage intrinsic widths are evaluated against the containing block's width unless the containing block width depends on the element. |
|
| Absolute replaced elements with 'direction' as left-to-right, 'auto' specified for 'margin-right' and intrinsic width |
G |
| Computed value of 'auto' for 'margin-left' or margin-right' on absolute replaced elements becomes a used value of '0'. The intrinsic width is also used if 'height' and 'width' are 'auto'. |
|
| Absolute replaced elements with 'direction' as left-to-right, 'auto' specified for 'margin-right' and percentage intrinsic width |
G |
| Percentage intrinsic widths are evaluated against the containing block's width. |
|
| Absolute replaced elements with 'direction' as left-to-right, 'auto' specified for 'margin-right' and percentage intrinsic width that cannot be resolved |
G |
| Percentage intrinsic widths are evaluated against the containing block's width unless the containing block width depends on the element. |
|
| Absolute replaced elements with 'direction' as right-to-left, 'auto' specified for 'margin-right' and intrinsic width |
G |
| Computed value of 'auto' for 'margin-left' or margin-right' on absolute replaced elements becomes a used value of '0'. The intrinsic width is also used if 'height' and 'width' are 'auto'. |
|
| Absolute replaced elements with 'direction' as right-to-left, 'auto' specified for 'margin-right' and percentage intrinsic width |
G |
| Percentage intrinsic widths are evaluated against the containing block's width. |
|
| Absolute replaced elements with 'direction' as right-to-left, 'auto' specified for 'margin-right' and percentage intrinsic width that cannot be resolved |
G |
| Percentage intrinsic widths are evaluated against the containing block's width unless the containing block width depends on the element. |
|
| Absolute replaced elements with 'direction' as left-to-right, intrinsic width and over-constrained situation |
G |
| Computed value of 'auto' for 'margin-left' or margin-right' on absolute replaced elements becomes a used value of '0'. The intrinsic width is also used if 'height' and 'width' are 'auto'. |
|
| Absolute replaced elements with 'direction' as left-to-right, percentage intrinsic width and over-constrained situation |
G |
| Percentage intrinsic widths are evaluated against the containing block's width. |
|
| Absolute replaced elements with 'direction' as left-to-right, percentage intrinsic width that cannot be resolved and is in an over-constrained situation |
G |
| Percentage intrinsic widths are evaluated against the containing block's width unless the containing block width depends on the element. |
|
| Absolute replaced elements with 'direction' as right-to-left, intrinsic width and over-constrained situation |
G |
| Computed value of 'auto' for 'margin-left' or margin-right' on absolute replaced elements becomes a used value of '0'. The intrinsic width is also used if 'height' and 'width' are 'auto'. |
|
| Absolute replaced elements with 'direction' as right-to-left, percentage intrinsic width and over-constrained situation |
G |
| Percentage intrinsic widths are evaluated against the containing block's width. |
|
| Absolute replaced elements with 'direction' as right-to-left, percentage intrinsic width that cannot be resolved and is in an over-constrained situation |
G |
| Percentage intrinsic widths are evaluated against the containing block's width unless the containing block width depends on the element. |
|
| 10.6.2 Inline replaced elements, block-level replaced elements in normal flow, 'inline-block' replaced elements in normal flow and floating replaced elements |
|---|
| Block replaced elements with 'margin-top' and 'margin-bottom' as 'auto' |
G |
| A block replaced elements' used value of 'margin-top' and/or 'margin-bottom' set to 'auto' is '0'. |
|
| Block replaced elements relying on intrinsic height dimensions |
G |
| The 'height' is the intrinsic height when an block replaced element with and intrinsic height has a 'height' and 'width' computed as 'auto'. |
|
| Block replaced elements with intrinsic ratios and 'height' set to 'auto' |
G |
| The 'height' is the used width divided by the ratio when an block replaced element has an intrinsic ratio, 'height' is set to 'auto' and 'width' is specified. |
|
| Block replaced elements without intrinsic ratios and 'height' set to 'auto' |
|
| For block replaced elements the 'height' is set to the largest rectangle that has a 2:1 ratio that is not greater than 150px and has a 'width' not greater than the device width. |
|
| Block replaced elements with percentage based intrinsic height |
|
| A block replaced elements with a percentage intrinsic height resolves based on the containing block height when percentage is explicitly specified. |
|
| Block replaced elements with percentage based intrinsic height that cannot be resolved |
|
| A block replaced elements with a percentage height that cannot be resolved has no intrinsic height. |
|
| Floated replaced elements with 'margin-top' and 'margin-bottom' as 'auto' |
G |
| A floated replaced elements' used value of 'margin-top' and/or 'margin-bottom' set to 'auto' is '0'. |
|
| Floated replaced elements relying on intrinsic height dimensions |
G |
| The 'height' is the intrinsic height when an floated replaced element with and intrinsic height has a 'height' and 'width' computed as 'auto'. |
|
| Floating replaced elements with intrinsic ratios and 'height' set to 'auto' |
G |
| The 'height' is the used width divided by the ratio when an floated replaced element has an intrinsic ratio, 'height' is set to 'auto' and 'width' is specified. |
|
| Floated replaced elements without intrinsic ratios and 'height' set to 'auto' |
|
| For floated replaced elements the 'height' is set to the largest rectangle that has a 2:1 ratio that is not greater than 150px and has a 'width' not greater than the device width. |
|
| Floated replaced elements with percentage based intrinsic height |
|
| A floated replaced element with percentage intrinsic height resolves based on the containing block height when percentage is explicitly specified. |
|
| Floated replaced elements with percentage based intrinsic height that cannot be resolved |
|
| A floated replaced elements with a percentage height that cannot be resolved has no intrinsic height. |
|
| Inline-block replaced elements with 'margin-top' and 'margin-bottom' as 'auto' |
G |
| An inline-block replaced elements' used value of 'margin-top' and/or 'margin-bottom' set to 'auto' is '0'. |
|
| Inline-block replaced elements relying on intrinsic height dimensions |
G |
| The 'height' is the intrinsic height when an inline-block replaced element with and intrinsic height has a 'height' and 'width' computed as 'auto'. |
|
| Inline-block replaced elements with intrinsic ratios and 'height' set to 'auto' |
G |
| The 'height' is the used width divided by the ratio when an inline-block replaced element has an intrinsic ratio, 'height' is set to 'auto' and 'width' is specified. |
|
| Inline-block replaced elements without intrinsic ratios and 'height' set to 'auto' |
|
| For inline-block replaced elements the 'height' is set to the largest rectangle that has a 2:1 ratio that is not greater than 150px and has a 'width' not greater than the device width. |
|
| Inline-block replaced elements with percentage based intrinsic height |
|
| An inline-block replaced element with percentage intrinsic height resolves based on the containing block height when percentage is explicitly specified. |
|
| Inline-block replaced elements with percentage based intrinsic height that cannot be resolved |
|
| An inline-block replaced elements with a percentage height that cannot be resolved has no intrinsic height. |
|
| Inline replaced elements with 'margin-top' and 'margin-bottom' as 'auto' |
G |
| An inline replaced elements' used value of 'margin-top' and/or 'margin-bottom' set to 'auto' is '0'. |
|
| Inline replaced elements relying on intrinsic height dimensions |
G |
| The 'height' is the intrinsic height when an inline replaced element with and intrinsic height has a 'height' and 'width' computed as 'auto'. |
|
| Inline replaced elements with intrinsic ratios and 'height' set to 'auto' |
G |
| The 'height' is the used width divided by the ratio when an inline replaced element has an intrinsic ratio, 'height' is set to 'auto' and 'width' is specified. |
|
| Inline replaced elements without intrinsic ratios and 'height' set to 'auto' |
|
| For inline replaced elements the 'height' is set to the largest rectangle that has a 2:1 ratio that is not greater than 150px and has a 'width' not greater than the device width. |
|
| Inline replaced elements with percentage based intrinsic height |
|
| An inline replaced element with percentage intrinsic height resolves based on the containing block height when percentage is explicitly specified. |
|
| Inline replaced elements with percentage based intrinsic height that cannot be resolved |
|
| An inline replaced elements with a percentage height that cannot be resolved has no intrinsic height. |
|
| Replaced Elements |
AG |
| Replaced Elements |
AG |
| Replaced Elements |
G |
| Replaced Elements |
G |
| 10.6.3 Block-level non-replaced elements in normal flow when 'overflow' computes to 'visible' |
|---|
| Block-level non-replaced elements in normal flow when 'overflow' computes to 'visible' and margins top and bottom are 'auto' |
|
| The margin top and bottom used values are '0' for block-level non-replaced elements in normal flow when 'overflow' computes to 'visible' and margin top and bottom both are 'auto'. |
|
| Block-level non-replaced elements in normal flow when 'overflow' does not compute to 'visible' |
|
| The margin top and bottom used values are '0' for block-level non-replaced elements in normal flow when 'overflow' does not compute to 'visible' and margin top and bottom both are 'auto'. |
|
| Block-level non-replaced elements in normal flow when 'overflow' computes to 'visible' and 'height' is 'auto' |
|
| The 'height' is the 'height' of the child block box when a block-level non-replaced element is in normal flow and 'overflow' computes to 'visible'. |
|
| Block-level non-replaced elements in normal flow when 'overflow' does not compute to 'visible' and 'height' is 'auto' |
|
| The 'height' is the 'height' of the child block box when a block-level non-replaced element is in normal flow and 'overflow' does not compute to 'visible'. |
|
| Block-level non-replaced elements in normal flow when 'overflow' computes to 'visible' and 'height' is 'auto' adjust based on the line box height |
A |
| The 'height' is the distance from the topmost to the bottommost line box when a block-level non-replaced element is in normal flow and 'overflow' computes to 'visible'. |
|
| Block-level non-replaced elements in normal flow when 'overflow' does not compute to 'visible' and 'height' is 'auto' adjust based on the line box height |
A |
| The 'height' is the distance from the topmost to the bottommost line box when a block-level non-replaced element is in normal flow and 'overflow' does not compute to 'visible'. |
|
| Height determination for block-level non-replaced elements in normal flow when 'overflow' computes to 'visible' and elements' margins collapse |
|
| The 'height' is the distance between the top border edge of the top most block-level child box that doesn't have margins collapsed through it, and the bottom border edge of the bottommost block-level child that doesn't have margins collapsed through it. When a block-level non-replaced element is in normal flow, 'overflow' computes to 'visible' and the 'height' is 'auto'. |
|
| Height determination for block-level non-replaced elements in normal flow when 'overflow' does not compute to 'visible' and elements' margins collapse |
|
| The 'height' is the distance between the top border edge of the top most block-level child box that doesn't have margins collapsed, and the bottom border edge of the bottommost block-level child that doesn't have margins collapsed. When a block-level non-replaced element is in normal flow, 'overflow' does not compute to 'visible' but has been propagated to the viewport and the 'height' is 'auto'. |
|
| Height determination for block-level non-replaced elements in normal flow when 'overflow' computes to 'visible' and elements' margins do not collapse |
|
| When a block-level non-replaced element is in normal flow, 'overflow' computes to 'visible', the 'height' is 'auto' and top and bottom margins do not collapse. The 'height' is the sized from the top of the topmost margin edge of the content to the bottom of the bottom most margin edge of the content. |
|
| Height determination for block-level non-replaced elements in normal flow when 'overflow' does not compute to 'visible' and elements' margins do not collapse |
|
| When a block-level non-replaced element is in normal flow, 'overflow' does not compute to 'visible', the 'height' is 'auto' and top and bottom margins do not collapse. The 'height' is the sized from the top of the topmost margin edge of the content to the bottom of the bottom most margin edge of the content. |
|
| Floated children are ignored for 'height' on block-level non-replaced elements in normal flow when 'overflow' computes to 'visible' |
|
| A floated child element is not considered when sizing the 'height' of a block-level non-replaced element is in normal flow. |
|
| Floated children are ignored for 'height' on block-level non-replaced elements in normal flow when 'overflow' does not computes to 'visible' |
|
| A floated child element is not considered when sizing the 'height' of a block-level non-replaced element is in normal flow. |
|
| An absolutely positioned child elements' 'height' is ignored for block-level non-replaced elements in normal flow when 'overflow' computes to 'visible' |
|
| An absolutely positioned child element is not considered when sizing the 'height' of a block-level non-replaced element is in normal flow. |
|
| An absolutely positioned child elements' 'height' is ignored for block-level non-replaced elements in normal flow when 'overflow' does not compute to 'visible' |
|
| An absolutely positioned child element is not considered when sizing the 'height' of a block-level non-replaced element is in normal flow. |
|
| A relative positioned child elements' offset is ignored for 'height' on a block-level non-replaced elements in normal flow when 'overflow' computes to 'visible' |
|
| A relative positioned child elements' offset is not considered when sizing the 'height' of a block-level non-replaced element is in normal flow. |
|
| A relative positioned child elements' offset is ignored for 'height' on a block-level non-replaced elements in normal flow when 'overflow' does not compute to 'visible' |
|
| A relative positioned child elements' offset is not considered when sizing the 'height' of a block-level non-replaced element is in normal flow. |
|
| float |
AG |
| float |
|
| 10.6.4 Absolutely positioned, non-replaced elements |
|---|
| Absolutely positioned, non-replaced elements, static position of fixed element |
|
| The calculation of static position is based on initial containing block when there is a fixed positioned element. |
|
| Absolutely positioned, non-replaced elements, shrinks-to-fit height |
A |
| The used value for absolutely positioned elements shrinks-to-fit height. |
|
| Absolutely positioned, non-replaced elements, vertical centering |
|
| An element is vertically centered when both 'margin-top' and 'margin-bottom' have equal values, when 'top', 'bottom' and 'height' are all are not auto and 'margin-top' and 'margin-bottom' are both 'auto'. |
|
| Absolutely positioned, non-replaced elements, 'margin-top' set to 'auto' |
|
| When 'top', 'bottom' and 'height' are all are not 'auto', 'margin-top' is 'auto' and 'margin-bottom' is not 'auto'. Then 'margin-top' becomes the remainder of the height of the containing box. |
|
| Absolutely positioned, non-replaced elements, 'margin-bottom' set to 'auto' |
|
| When 'top', 'bottom' and 'height' are all are not 'auto', 'margin-top' is not 'auto' and 'margin-bottom' is 'auto'. Then 'margin-bottom' becomes the remainder of the height of the containing box. |
|
| Absolutely positioned, non-replaced elements, over-constrained |
|
| The 'bottom' value is ignored and the equation solves for the bottom value, when the values for 'top', 'bottom', 'height', 'margin-top', 'margin-bottom' add up to more than the containing blocks height. |
|
| Absolutely positioned, non-replaced elements, shrink-to-fit solve for top |
A |
| Verify that height is based on the overall height of the content, 'margin-top', 'auto' is set to '0' and solve for 'top', when 'top' and 'height' are both 'auto' and 'bottom' is not 'auto'. |
|
| Absolutely positioned, non-replaced elements, 'top' set to static position |
|
| When 'top' is set to the static position and any 'auto' values for top and bottom margin are set to '0', when 'top' and 'bottom' are 'auto' and 'height' is not 'auto'. |
|
| Absolutely positioned, non-replaced elements, height is shrink-to-fit |
A |
| The 'height' is based on the content height, 'auto' values for 'margin-top' and 'margin-bottom' are set to '0' when 'height' and 'bottom' are 'auto' and 'top' is not 'auto'. |
|
| Absolutely positioned, non-replaced elements, 'margin-top' and 'margin-bottom' set to '0' |
|
| The 'auto' values for 'margin-top' and 'margin-bottom' are set to '0', when 'top', 'height' and 'bottom' are all not auto. |
|
| Absolutely positioned, non-replaced elements, 'height' based on 'top' and 'bottom' positions |
|
| The 'auto' values on 'margin-top', 'margin-bottom' are set to '0' and the 'height' is the remaining space between the 'top' and 'bottom' positions, when 'height' is 'auto' and 'top' and 'bottom' are both not 'auto'. |
|
| Absolutely positioned, non-replaced elements, solve for 'bottom' |
|
| When 'margin-top' and 'margin-bottom' are set to '0' the 'bottom' value resolves to the remaining space within the containing block. |
|
| Max-height on absolutely positioned, non-replaced elements, static position of fixed element |
|
| The calculation of static position is based on initial containing block when there is a fixed positioned element. |
|
| Max-height on absolutely positioned, non-replaced elements, shrinks-to-fit height |
A |
| The used value for absolutely positioned elements shrinks-to-fit height. |
|
| Max-height on absolutely positioned, non-replaced elements, 'margin-bottom' set to 'auto' |
|
| When 'top', 'bottom' and 'height' are all are not 'auto', 'margin-top' is not 'auto' and 'margin-bottom' is 'auto'. Then 'margin-bottom' becomes the remainder of the height of the containing box. |
|
| Max-height on absolutely positioned, non-replaced elements, over-constrained |
|
| The 'bottom' value is ignored and the equation solves for the bottom value, when the values for 'top', 'bottom', 'height', 'margin-top', 'margin-bottom' add up to more than the containing blocks height. |
|
| Max-height on absolutely positioned, non-replaced elements, shrink-to-fit solve for top |
A |
| The height is based on the overall height of the content, 'margin-top', 'auto' is set to '0' and solve for 'top', when 'top' and 'height' are both 'auto' and 'bottom' is not 'auto'. |
|
| Max-height on absolutely positioned, non-replaced elements, 'top' set to static position |
|
| When 'top' is set to the static position and any 'auto' values for top and bottom margin are set to '0', when 'top' and 'bottom' are 'auto' and 'height' is not 'auto'. |
|
| Max-height on absolutely positioned, non-replaced elements, height is shrink-to-fit |
A |
| The 'height' is based on the content height, 'auto' values for 'margin-top' and 'margin-bottom' are set to '0' when 'height' and 'bottom' are 'auto' and 'top' is not 'auto'. |
|
| Max-height on absolutely positioned, non-replaced elements, solve for 'bottom' |
|
| When 'margin-top' and 'margin-bottom' are set to '0' the 'bottom' value resolves to the remaining space within the containing block. |
|
| 10.6.5 Absolutely positioned, replaced elements |
|---|
| Absolute replaced elements with 'margin-top' and 'margin-bottom' as 'auto' |
G |
| An absolutely positioned replaced elements' used value of 'margin-top' and/or 'margin-bottom' set to 'auto' is '0'. |
|
| Absolute replaced elements relying on intrinsic height dimensions |
G |
| The 'height' is the intrinsic height when an absolutely positioned replaced element with and intrinsic height has a 'height' and 'width' computed as 'auto'. |
|
| Absolute replaced elements with intrinsic ratios and 'height' set to 'auto' |
G |
| The 'height' is the used width divided by the ratio when an absolutely positioned replaced element has an intrinsic ratio, 'height' is set to 'auto' and 'width' is specified. |
|
| Absolute replaced elements without intrinsic ratios and 'height' set to 'auto' |
|
| For an absolutely positioned replaced element the 'height' is set to the largest rectangle that has a 2:1 ratio that is not greater than 150px and has a 'width' not greater than the device width. |
|
| Absolute replaced elements with percentage based intrinsic height |
|
| An absolutely positioned replaced element with percentage intrinsic height resolves based on the containing block height when percentage is explicitly specified. |
|
| Absolute replaced elements with percentage based intrinsic height that cannot be resolved |
|
| An absolutely positioned replaced element with a percentage height that cannot be resolved has no intrinsic height. |
|
| Absolute replaced elements with 'margin-top', 'margin-bottom' and 'bottom' as 'auto' |
G |
| An absolutely positioned replaced elements' used value of 'bottom', 'margin-top' and/or 'margin-bottom' set to 'auto' is '0'. |
|
| Absolute replaced elements relying on intrinsic height dimensions and 'bottom' set to 'auto' |
G |
| The 'height' is the intrinsic height when an absolutely positioned replaced element with and intrinsic height has a 'height', 'width' and 'bottom' computed as 'auto'. |
|
| Absolute replaced elements with intrinsic ratios, 'height' and 'bottom' set to 'auto' |
G |
| The 'height' is the used width divided by the ratio when an absolutely positioned replaced element has an intrinsic ratio, 'height' and 'bottom' are set to 'auto' and 'width' is specified. |
|
| Absolute replaced elements without intrinsic ratios, 'height' and 'bottom' set to 'auto' |
|
| For an absolutely positioned replaced element the 'height' is set to the largest rectangle that has a 2:1 ratio that is not greater than 150px and has a 'width' not greater than the device width. |
|
| Absolute replaced elements with percentage based intrinsic height and 'bottom' set to 'auto' |
|
| An absolutely positioned replaced element with percentage intrinsic height resolves based on the containing block height when percentage is explicitly specified. |
|
| Absolute replaced elements with percentage based intrinsic height that cannot be resolved and 'top' specified |
|
| An absolutely positioned replaced element with a percentage height that cannot be resolved has no intrinsic height. |
|
| Absolute replaced elements relying on intrinsic height dimensions and 'top', 'bottom' are not 'auto' |
G |
| The 'height' is the intrinsic height when an absolutely positioned replaced element with and intrinsic height has a 'height', 'width' computed as 'auto' and 'top', 'bottom' are not 'auto'. |
|
| Absolute replaced elements with intrinsic ratios, 'height' set to 'auto' and 'top', 'bottom' are not 'auto' |
G |
| The 'height' is the used width divided by the ratio when an absolutely positioned replaced element has an intrinsic ratio, 'height' is set to 'auto', 'width' is specified and 'top', 'bottom' are not 'auto'. |
|
| Absolute replaced elements without intrinsic ratios, 'height' set to 'auto' and 'top', 'bottom' are not 'auto' |
|
| For an absolutely positioned replaced element the 'height' is set to the largest rectangle that has a 2:1 ratio that is not greater than 150px and has a 'width' not greater than the device width. |
|
| Absolute replaced elements with percentage based intrinsic height set to 'auto' and 'top', 'bottom' are not 'auto' |
|
| An absolutely positioned replaced element with percentage intrinsic height resolves based on the containing block height when percentage is explicitly specified. |
|
| Absolute replaced elements with percentage based intrinsic height that cannot be resolved where 'top' and 'bottom' are not 'auto' |
|
| An absolutely positioned replaced element with a percentage height that cannot be resolved has no intrinsic height. |
|
| Absolute replaced elements with 'margin-bottom' as 'auto' and 'top', 'bottom', 'margin-top' are not 'auto' |
G |
| An absolutely positioned replaced element with only one value as 'auto' solves for that value (margin-bottom). |
|
| Absolute replaced elements relying on intrinsic height dimensions and 'top', 'bottom', 'margin-top' are not 'auto' |
G |
| The 'height' is the intrinsic height when an absolutely positioned replaced element with and intrinsic height has a 'height', 'width' computed as 'auto' and 'top', 'bottom' are not 'auto'. |
|
| Absolute replaced elements with intrinsic ratios, 'height' set to 'auto' and 'top', 'bottom', 'margin-top' are not 'auto' |
G |
| The 'height' is the used width divided by the ratio when an absolutely positioned replaced element has an intrinsic ratio, 'height' is set to 'auto', 'width' is specified and 'top', 'bottom' are not 'auto'. |
|
| Absolute replaced elements without intrinsic ratios, 'height' set to 'auto' and 'top', 'bottom', 'margin-top' are not 'auto' |
|
| For an absolutely positioned replaced element the 'height' is set to the largest rectangle that has a 2:1 ratio that is not greater than 150px and has a 'width' not greater than the device width. |
|
| Absolute replaced elements with percentage based intrinsic height set to 'auto' and 'top', 'bottom', 'margin-top' are not 'auto' |
|
| An absolutely positioned replaced element with percentage intrinsic height resolves based on the containing block height when percentage is explicitly specified. |
|
| Absolute replaced elements with percentage based intrinsic height that cannot be resolved where 'top', 'bottom', 'margin-top' are not 'auto' |
|
| An absolutely positioned replaced element with a percentage height that cannot be resolved has no intrinsic height. |
|
| Absolute replaced elements with over-constrained values |
G |
| An absolutely positioned replaced element with over-constrained values solves for 'bottom'. |
|
| Absolute replaced elements relying on intrinsic height dimensions and over-constrained values |
G |
| The 'height' is the intrinsic height when an absolutely positioned replaced element with and intrinsic height with over-constrained values solves for 'bottom'. |
|
| Absolute replaced elements with intrinsic ratios, 'height' set to 'auto' and over-constrained values |
G |
| The 'height' is the used width divided by the ratio when an absolutely positioned replaced element has an intrinsic ratio, 'height' is set to 'auto', with over-constrained values solves for 'bottom'. |
|
| Absolute replaced elements without intrinsic ratios, 'height' set to 'auto' and over-constrained values |
|
| For an absolutely positioned replaced element the 'height' is set to the largest rectangle that has a 2:1 ratio that is not greater than 150px and has a 'width' not greater than the device width. And with over-constrained values element solves for 'bottom'. |
|
| Absolute replaced elements with percentage based intrinsic height set to 'auto' and over-constrained values |
|
| An absolutely positioned replaced element with percentage intrinsic height resolves based on the containing block height when percentage is explicitly specified. |
|
| Absolute replaced elements with percentage based intrinsic height that cannot be resolved and there are over-constrained values |
|
| An absolutely positioned replaced element with a percentage height that cannot be resolved has no intrinsic height. |
|