display: inline-block

Works (more or less) in: IE5+/Win, IE5/Mac, Op7+, Saf, Gecko 1.9+. Many differences in vertical-align interpretation.

Note: The first series of tests (A, B, C) have not valid HTML, since a span element is used as inline-block and there is an ul inside. This is for testing purpose, since with a span IE7-/Win works more "easily" (see below, and IE/Win: inline-block and hasLayout.) Most browsers work as desired even with the not valid HTML.

Series A: Widthless inline-block spans, together with text

A1. inline-block span, no vertical-align specified

blah blah Inline Block
miau miau
barabau
Inline Block
bau bau
blah blah blah blah miao

A2. inline-block span with vertical-align: top

blah blah Inline Block
miau miau
barabau
Inline Block
bau bau
blah blah blah blah miao

A3. inline-block span with vertical-align: bottom

blah blah Inline Block
miau miau
barabau
Inline Block
bau bau
blah blah blah blah miao

A4. inline-block span with vertical-align: middle

blah blah Inline Block
miau miau
barabau
Inline Block
bau bau
blah blah blah blah miao

A5. inline-block span with vertical-align: baseline

blah blah Inline Block
miau miau
barabau
Inline Block
bau bau
blah blah blah blah miao

Series B: inline-block spans having assigned width, together with text

This is like series A but with an assigned width on the inline-blocks. IE5/Mac works better: without a width the inline-block stretches to the full available width when it contains widthless block elements (and in other conditions) instead of shrink-wrapping the content.

B1. inline-block span with assigned width, no vertical-align specified

blah blah Inline Block
miau miau
barabau
Inline Block
bau bau
blah blah blah blah miao

B2. inline-block span with assigned width and vertical-align: top

blah blah Inline Block
miau miau
barabau
Inline Block
bau bau
blah blah blah blah miao

B3. inline-block span with assigned width and vertical-align: bottom

blah blah Inline Block
miau miau
barabau
Inline Block
bau bau
blah blah blah blah miao

B4. inline-block span with assigned width and vertical-align: middle

blah blah Inline Block
miau miau
barabau
Inline Block
bau bau
blah blah blah blah miao

B5. inline-block span with assigned width and vertical-align: baseline

blah blah Inline Block
miau miau
barabau
Inline Block
bau bau
blah blah blah blah miao

Series C: inline-block spans containing assigned width contents

This is like series A but with an assigned width on the contents of the inline-blocks. IE5/Mac works better (the inline-blocks shrink-wrap the content.)

C1. inline-block span with assigned width contents, no vertical-align specified

blah blah Inline Block
miau miau
barabau
Inline Block
bau bau
blah blah
  • Inline Block uno
  • Inline Block due
  • Inline Block tre
  • Inline Block quattro
blah blah miao

C2. inline-block span with assigned width contents and vertical-align: top

blah blah Inline Block
miau miau
barabau
Inline Block
bau bau
blah blah
  • Inline Block uno
  • Inline Block due
  • Inline Block tre
  • Inline Block quattro
blah blah miao

C3. inline-block span with assigned width contents and vertical-align: bottom

blah blah Inline Block
miau miau
barabau
Inline Block
bau bau
blah blah
  • Inline Block uno
  • Inline Block due
  • Inline Block tre
  • Inline Block quattro
blah blah miao

C4. inline-block span with assigned width contents and vertical-align: middle

blah blah Inline Block
miau miau
barabau
Inline Block
bau bau
blah blah
  • Inline Block uno
  • Inline Block due
  • Inline Block tre
  • Inline Block quattro
blah blah miao

C5. inline-block span with assigned width contents and vertical-align: baseline

blah blah Inline Block
miau miau
barabau
Inline Block
bau bau
blah blah
  • Inline Block uno
  • Inline Block due
  • Inline Block tre
  • Inline Block quattro
blah blah miao

Series D: Widthless divs with display:inline-block, together with text

This is like series A, but with div in place of span (and so valid HTML.) In IE7-/Win inline-block applied to a block element doesn't work (or, better, does not have the expected effect, see below and IE/Win: inline-block and hasLayout)

D1. inline-block div, no vertical-align specified

blah blah
Inline Block
miau miau
barabau
Inline Block
bau bau
blah blah
blah blah miao

D2. inline-block div with vertical-align: top

blah blah
Inline Block
miau miau
barabau
Inline Block
bau bau
blah blah
blah blah miao

D3. inline-block div with vertical-align: bottom

blah blah
Inline Block
miau miau
barabau
Inline Block
bau bau
blah blah
blah blah miao

D4. inline-block div with vertical-align: middle

blah blah
Inline Block
miau miau
barabau
Inline Block
bau bau
blah blah
blah blah miao

D5. inline-block divs with vertical-align: baseline

blah blah
Inline Block
miau miau
barabau
Inline Block
bau bau
blah blah
blah blah miao

Series E: Some divs with display inline-block, and display:inline plus hasLayout for IE7-/Win

The combination display:inline + hasLayout produces in IE7-/Win an inline-block "effect" (on any element, see IE/Win: inline-block and hasLayout), so this is like series D, but now working in IE7-/Win.

E1. inline(-block) div, no vertical-align specified

blah blah
Inline Block
miau miau
barabau
Inline Block
bau bau
blah blah
blah blah miao

E2. inline(-block) div with vertical-align: top

blah blah
Inline Block
miau miau
barabau
Inline Block
bau bau
blah blah
blah blah miao

E3. inline(-block) div with vertical-align: bottom

blah blah
Inline Block
miau miau
barabau
Inline Block
bau bau
blah blah
blah blah miao

E4. inline(-block) div with vertical-align: middle

blah blah
Inline Block
miau miau
barabau
Inline Block
bau bau
blah blah
blah blah miao

E5. inline(-block) div with vertical-align: baseline

blah blah
Inline Block
miau miau
barabau
Inline Block
bau bau
blah blah
blah blah miao

Series F: Like series E, but with an assigned width on the inline-blocks

(good for IE5/Mac)

F1. inline(-block) div with assigned width, no vertical-align specified

blah blah
Inline Block
miau miau
barabau
Inline Block
bau bau
blah blah
blah blah miao

F2. inline(-block) div with assigned width and vertical-align: top

blah blah
Inline Block
miau miau
barabau
Inline Block
bau bau
blah blah
blah blah miao

F3. inline(-block) div with assigned width and vertical-align: bottom

blah blah
Inline Block
miau miau
barabau
Inline Block
bau bau
blah blah
blah blah miao

F4. inline(-block) div with assigned width and vertical-align: middle

blah blah
Inline Block
miau miau
barabau
Inline Block
bau bau
blah blah
blah blah miao

F5. inline(-block) div assigned width and vertical-align: baseline

blah blah
Inline Block
miau miau
barabau
Inline Block
bau bau
blah blah
blah blah miao

Series G: Like series E, but with assigned width on the contents of the inline-blocks

(good for IE5/Mac)

G1. (inline-)block div with assigned width contents, no vertical-align specified

blah blah
Inline Block
miau miau
barabau
Inline Block
bau bau
blah blah
  • Inline Block uno
  • Inline Block due
  • Inline Block tre
  • Inline Block quattro
blah blah miao

G2. (inline-)block div with assigned width contents and vertical-align: top

blah blah
Inline Block
miau miau
barabau
Inline Block
bau bau
blah blah
  • Inline Block uno
  • Inline Block due
  • Inline Block tre
  • Inline Block quattro
blah blah miao

G3. (inline-)block div with assigned width contents and vertical-align: bottom

blah blah
Inline Block
miau miau
barabau
Inline Block
bau bau
blah blah
  • Inline Block uno
  • Inline Block due
  • Inline Block tre
  • Inline Block quattro
blah blah miao

G4. (inline-)block div with assigned width contents and vertical-align: middle

blah blah
Inline Block
miau miau
barabau
Inline Block
bau bau
blah blah
  • Inline Block uno
  • Inline Block due
  • Inline Block tre
  • Inline Block quattro
blah blah miao

G5. (inline-)block div with assigned width contents and vertical-align: baseline

blah blah
Inline Block
miau miau
barabau
Inline Block
bau bau
blah blah
  • Inline Block uno
  • Inline Block due
  • Inline Block tre
  • Inline Block quattro
blah blah miao

CSS tests home