Chapter 9 - Visual formatting model - 9.4.1 Block formatting contexts
Go to the relevant page of the specification.
- block-formatting-contexts-001
-
Vertical layout of boxes
Boxes are vertically laid out one after the other beginning at the top of a containing block. - block-formatting-contexts-003
-
Vertical distance with margins
The vertical distance between two sibling boxes is determined by the margin property. - block-formatting-contexts-004 (ahem, image)
-
Block Formatting Contexts: Margin Collapsing
Margins collapse between adjacent block boxes in a block formatting context. - block-formatting-contexts-005
-
No padding or margin, left edges touch
When there is no padding or margins on elements the left outer edge of the child box will touch the left edge of the containing block. - block-formatting-contexts-006
-
No padding and margin, right edges touch
When there is no padding or margins on elements the right outer edge of the child box will touch the right edge of the containing block. - block-formatting-contexts-007
-
Floats and box edges
When there is no padding or margins on a floated child element the left outer edge of the child box will touch the left edge of the containing block. - block-formatting-contexts-008
-
New block formatting context with floated elements
Floated elements establish new block formatting context. - block-formatting-contexts-009
-
New block formatting context with absolute positioned elements
Absolutely positioned elements establish a new block formatting context. - block-formatting-contexts-010
-
Inline-block elements establish a new block formatting context
Elements defined as inline-blocks establish a new block formatting context. - block-formatting-contexts-011
-
Table-cell elements establish a new block formatting context
Elements defined as table-cell elements establish a new block formatting context. - block-formatting-contexts-012
-
Table-caption elements establish a new block formatting context
Elements with display table-caption establish a new block formatting context. - block-formatting-contexts-013
-
Overflow set to 'scroll' establishes a new block formatting context
A new block formatting context is established when overflow is set to 'scroll'. - block-formatting-contexts-014
-
Overflow set to 'auto' establishes a new block formatting context
A new block formatting context is established when overflow is set to 'auto'. - block-formatting-contexts-015
-
Overflow set to 'hidden' establishes a new block formatting context
A new block formatting context is established when overflow is set to 'hidden'. - block-formatting-contexts-016
-
Block formatting contexts and 'overflow' set to 'visible'
Overflow set to 'visible' does not establish a new block formatting context.