10.3.3 Block-level, non-replaced elements in normal flow

Chapter 10 - Visual formatting model details - 10.3.3 Block-level, non-replaced elements in normal flow

Go to the relevant page of the specification.

block-non-replaced-width-001
Solving for width of block-level non-replaced elements in normal flow
The equation; 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' is equal the width of containing block.
block-non-replaced-width-002
Solving for width of block-level non-replaced elements in normal flow when 'width' is 'auto'
When width is auto and the combination of border widths, padding widths, scrollbar widths, width, and non 'auto' margin widths are larger than the width of the containing block, the margin widths are treated as 0.
block-non-replaced-width-003
Solving over-constrained situation for block-level non-replaced elements in normal flow and direction is left-to-right
When direction is left-to-right, margin-right is ignored in an over-constrained situation.
block-non-replaced-width-004
Solving over-constrained situation for block-level non-replaced elements in normal flow and direction is right-to-left
When direction is right-to-left, margin-left is ignored in an over-constrained situation.
block-non-replaced-width-005
Solving width for block-level non-replaced elements in normal flow with single 'auto' value
If 'width' is set to 'auto', no other 'auto' values are set the 'width' is computed based the width of the containing block.
block-non-replaced-width-006
Solving width for block-level non-replaced elements in normal flow with multiple properties with 'auto' values
If 'width' is set to 'auto', any other 'auto' values become '0' and the 'width' is computed based on remaining space which includes any negative width.
block-non-replaced-width-007 (ahem)
Box centering with 'margin-left' and 'margin-right' set to auto
When 'margin-left' and 'margin-right' are set to auto and the element has a 'width' then the box will be centered.
block-non-replaced-width-008
Solving 'width: auto' of a block-level non-replaced element in normal flow with one other property set to an 'auto' value
If 'width' is set to 'auto', any other 'auto' values become '0' and the determination of 'width' proceeds from the following equality: 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' = width of containing block
c412-blockw-000 (ahem, image)
Horizontal Formatting