REALLY Basic: DIV/CSS Vertical Alignment

[Slick50]

http://messiah.scojul.homedns.org

Hi, I'm asking this question in the context of trying to fully comprehend
the CSS specification. Can you explain to me why the SPAN element is hanging
a bit below the bottom of the two IMG elements?

And maybe suggest a preferred way to align it with the bottom of the IMG
elements?

Thanks.

 

[dorayme]

http://messiah.scojul.homedns.org

Try this as your html, unlink your css file:


<div style="border:0;padding:0;font-size:2em;">abc...xyz
<img style="border:0;padding:0;" src="images/square.gif">
abc...xyz<img style="border:0;padding:0; "src="images/hands.gif">
abc...xyz
</div>

Your "hands" img has white around it and, relevantly, at the
bottom, giving the illusion causing your puzzle.

There is much wrong with your code, apart from this.

 

[dorayme]

Try this as your html, unlink your css file:


<div style="border:0;padding:0;font-size:2em;">abc...xyz
<img style="border:0;padding:0;" src="images/square.gif">
abc...xyz<img style="border:0;padding:0; "src="images/hands.gif">
abc...xyz
</div>

Your "hands" img has white around it and, relevantly, at the
bottom, giving the illusion causing your puzzle.

There is much wrong with your code, apart from this.

In case you are wondering, I should add, images have no
descenders, some letters have, hence the going below for just
these letters (none in your text if I recall).

And in case you were not sure what I meant about the white space
in the image of the hands, open it in an image editor and crop it
closer to the bottom of the lowest blue hand.