square 40 x 40
square 10 x 10
line 100 x 1
line 1 x 100
The previous tests use empty divs and works in Moz, Op6+, Saf, IE5/Mac, IE7. But in IE6-/Win they have a minimum height dependent on font size (presumably the current line-height value.)
The following ones contain an empty comment, they work IE6-/Win as well. Markup: <div><!-- --></div>
square 10 x 10
line 100 x 1
The following are other, less good attempts.
With font-size 1px. In IE6-/Win they have a 2 o 3px minimum height (dependent on font-family.)
square 10 x 10
line 100 x 1
With overflow:hidden and font-size:1px. OK in IE/Win.
square 10 x 10
line 100 x 1
With font-size:1px, line-height:0 and an inside. OK in IE/Win.
square 10 x 10
line 100 x 1
Attempt to make a box occupying no space
With an empty div, OK (but in IE5/Win the whole container partly collapses.)
With an empty div and height:0 (or width:0), OK except in IE6-/Win.
With height:0 and an empty comment inside, OK in IE/Win as well.
With height:0, overflow:hidden, font-size:1px, line-height:0, OK except 2 or 3 extra px in IE5.5/Win!!!
With height:0, font-size:1px, line-height:0 and inside. OK in IE/Win.
Note: Solutions using an in IE/Mac with text zoom 200% or higher show some extra space....