CODEWITHSUNDEEP
htmlcss
Stefan Schouten
Stefan Schouten

Reputation: 349

HTML/CSS: 4 pixels of space

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?

Upvotes: 0

Views: 2013

Answers (2)

xionutz2k
xionutz2k

Reputation: 729

add the following to your css:

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

Upvotes: 0

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324630

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.

Upvotes: 2

Related Questions