WeasySuite - 9.4.2 Inline formatting context

Chapter 9 - Visual formatting model - 9.4.2 Inline formatting context

Go to the relevant page of the specification.

c42-ibx-pad-000 (ahem, image): Inline Elements
empty-inline-001: Empty inline elements
Empty inline elements create a zero-height line box.
inline-formatting-context-001: Inline formatting context and basic horizontal Layout
Inline boxes are laid out horizontally or one after the other starting at the top of the containing block.
inline-formatting-context-002: Inline formatting context with a horizontal left margins
Horizontal left margins are respected between inline boxes.
inline-formatting-context-003: Inline formatting context with a horizontal right margins
Horizontal right margins are respected between inline boxes.
inline-formatting-context-004: Inline formatting context with a left border
Left borders are respected between inline boxes.
inline-formatting-context-005: Inline formatting context with a right border
Right borders are respected between inline boxes.
inline-formatting-context-006: Inline formatting context with left padding
Left padding are respected between inline boxes.
inline-formatting-context-007: Inline formatting context with right padding
Right padding are respected between inline boxes.
inline-formatting-context-008 (ahem): Inline element widths are determined by the containing block
Inline element width is determined by the containing block.
inline-formatting-context-009 (ahem): Inline element widths are determined by the containing block and floated elements
Inline element width is determined by the containing block and any floated elements.
inline-formatting-context-010 (ahem): Line boxes are tall enough for all boxes
A line box is always tall enough to contain all the boxes in the line.
inline-formatting-context-011 (ahem): Vertical-align and alignment of inline boxes
The 'vertical-align' property determines the vertical alignment of a box within a line box.
inline-formatting-context-012: Inline boxes vertically stack if they do not fit horizontally
Inline boxes stack vertically when they do not fit within an element horizontally.
inline-formatting-context-013 (ahem): Wrapping inline boxes and vertical spacing
Line boxes are stacked with no vertical separation and they never overlap.
inline-formatting-context-014 (ahem): Line boxes span the container
Line boxes span the entire width of a container unless constrained by floats.
inline-formatting-context-015: Line boxes next to floats
Line boxes adjust for floated elements.
inline-formatting-context-016: Line box distribution with the 'text-align' property
When the inline box is wider than the line boxes the 'text-align' property is used to align the line boxes.
inline-formatting-context-017 (may): Text-align 'justify' and space and word stretching
If 'text-align' is set to 'justify' the user agent may stretch spaces and/or words.
inline-formatting-context-018: Text-align 'justify' and 'inline-table' elements
If 'text-align' is set to 'justify' the user agent does not stretch spaces and/or words when the 'display' property is set to 'inline-table'.
inline-formatting-context-019: Text-align 'justify' and 'inline-block' elements
If 'text-align' is set to 'justify' the user agent does not stretch spaces and/or words when the 'display' property is set to 'inline-block'.
inline-formatting-context-020: Inline boxes exceeding the line box
Inline boxes are split onto additional lines if the line box does not fit within the width.
inline-formatting-context-021: Inline boxes exceeding the line box and overflowing
If inline boxes cannot be split (i.e.: white-space: nowrap) then the inline box overflows the line box.
inline-formatting-context-022 (ahem, image): Inline boxes that are split and the margin, border, padding effect
Margins, borders and padding have no visual effect when inline boxes are split.
inline-formatting-context-023: Bidirectional text runs can create additional line boxes
Additional inline boxes can be created for the bidirectional text.
inlines-001: CSS Inline Box Model: Layering Model
inlines-009 (ahem, image): CSS Inline Box Model: Behaviour near cells (specified line height)
inlines-010 (ahem, image): CSS Inline Box Model: Behaviour near cells (normal line height)
inlines-011 (image): CSS Inline Box Model: Baseline alignment of images
inlines-012 (image): CSS Inline Box Model: Baseline alignment of images