Re: breaking between inline boxes

--- Andrew Fedoniouk <> wrote:
> It is already there:
> ul > li { display:inline-block; }
> should do the magic in UAs that support display:inline-block (Opera, 
> Safari).

Elements with display:inline-block form inline boxes, just like elements with display:inline.
Here's the only relevant bits I could find from CSS 2.1 about laying out inline boxes (section

"When several inline boxes cannot fit horizontally within a single line box, they are distributed
among two or more vertically-stacked line boxes."

"When an inline box exceeds the width of a line box, it is split into several boxes and these
boxes are distributed across several line boxes. If an inline box cannot be split [...], then the
inline box overflows the line box."

The spec seems to treat all inline boxes the same, but current browsers (Firefox 3, Konqueror
3.5.6, Opera 9) break between some inline boxes but not others.

don't break between:
non-replaced elements with display:inline

break between:
non-replaced elements with display:inline-block
replaced elements with display:inline
replaced elements with display:inline-block

The spec needs to be clear about this behavior. I think the best solution would be to add
something like this:

"If an inline box cannot be split, then the inline box begins in a new line box. If the inline box
is already at the beginning of a line box, then the inline box overflows the line box."

This would allow all inline boxes to be treated the same, and the only change would be breaks
inserted between non-replaced elements with display:inline where necessary to prevent overflow.

The only way to keep the current behavior would be to treat various kinds of inline boxes differently.

Received on Friday, 3 August 2007 07:28:37 UTC