HTML/CSS: 4 pixels of space

Question

I am trying to make a little website but I have a little css problem. If you hover over the names at the bottom of the photo, the photo comes up like it should. But there's a space of 4 pixels underneath, which I can't seem to remove. I've tried margin-bottom: -4px but that made the animation weird.

I guess it's a simple thing, but I just can't put my finger on the solution. Could anyone help?

Answer 1

Try vertical-align:bottom;

Images are, by default, inline-block elements. This basically means that they are treated like characters, but can have width and height.

The thing to note about characters is that they have a baseline . Most letters are aligned with this baseline, but some (such as q, p, j, g) drop below it.

Therefore, since images are aligned to the baseline, a little extra space is left underneath. vertical-align:bottom overrides, this, forcing the image to align to the bottom of the text. Note that these alignments apply even if there is no text.

Answer 2

add the following to your css:

.banner .photo img {
    display:block;
    padding:0px;
}