Transitional (almost standards) mode and elements containing only an image

Most browsers (including IE8) have a transitional (almost standards) mode in which an element with no text does not necessarily create an inline box with a minimum height given by the line height in effect.

In the following test cases a div element with 'big' font size has red background, a darker border, and contains a span containing just an image. Since the page triggers transitional mode the div (and maybe the span) wraps vertically the image with no space above or below it. This occurs in all modern browsers. However addition of some properties on the span may make this behavior to change: vertical space appears, the same space that would be present in standards mode. Here the browsers differ vastly.

Same as above with horizontal padding on the span.

With horizontal border on the span.

With horizontal margin on the span.

With outline on the span.

With background color on the span. This makes a difference only in IE8 (related connect bug?).

With a background image on the span. This makes a difference only in IE8.

With vertical-align: top on the span. This makes a difference only in IE8.

CSS tests home