Add vertical-align support for images

[andreasisaak]

Please add the vertical-align to prevent the 1px space at the bottom of images

[aratak]

Why you suggest "middle" as a default? "baseline" is better, imho. What do you think?

[andreasisaak]

The value "middle" is just my taste ;) But i think you are right - "baseline" ist better for a standard css.

[aratak]

Okay. The second my point:
Does some browser haven't "baseline" for images as default value for vertical-align property?

Why you want to add this property?

[andreasisaak]

Because its a well-known bug in IE.

A other solution is to add "display:block" to the images but i think this is to heavy. "vertical-align" is the smarter solution

[andreasisaak]

Sorry but baseline is not the solution!! My fault, it must be either vertical-align: middle or display: block

You can see the testcase here:
http://jsfiddle.net/andreasisaak/GqPQG/

[necolas]

The space can be removed with various other values for vertical-align as well as applying line-height:0 to the container.

However, vertical-align:baseline is the default in all browsers. I don't think I want to remove the default, expected vertical alignment of images for this scenario.

[andreasisaak]

Yes, but the default dont correct the bug ;)

[necolas]

It's not a bug.

[andreasisaak]

You think it's not a bug? 3px white space at the bottom of every image?
Please search on google ;)

3px Gap Bug aka Text Jog Bug

[paulirish]

http://jsfiddle.net/GqPQG/4/ is pretty weird to me.
but http://jsfiddle.net/GqPQG/5/ is even weirder.

so i think a default of middle would be bad, even though it makes the img sit nicely in its parent block.

text-bottom is close but not the same as baseline which is widely regarded as the correct interplay between text and img's...

so yeah.

[Yeswanth-JG]

parent-selector {
font-size:0;
}

parent-selector * {
font-size:12px (or some desired value) //this is needed only for text-containers
}

Try the above for removing space in bottom. No need to change default values.

By default, image will have "display:inline-block" and vertical-align:baseline