Container problem - getting an extra 6px added to height

HTML & CSS
1

I have a little CSS problem I can resolve and I’m hoping someone can help me out.

I am adding an author box to a WordPress site and I’m inserting the authors’ gravatar into this box. I enclosed the IMG tag in a div that sets 5px padding all around the image to create a small border. The image itself is 96px wide and tall with its border, margin and padding all set to zero (0). For some reason that I can’t figure out, there is an extra 6px added to the height of the div (for a total height of 102px) which I can see from within Firebug. This causes the visual border I am trying to create to be larger on the bottom than the border on the other three sides.

Here is a link to a post where you can see the problem (the author box appears below the post): http://www.drkarenruskin.com/1848/economic-crisis-affects-mental-health-questions-to-consider/

Any ideas of where the extra 6px are coming from and how I can eliminate them?

Eric

2

That’s padding caused by the image being an inline element.

Add display: block to the image:


.author-image img {
  display: block
}

Solves it for me :slight_smile:

3

ScallioXTX,

Thanks so much for your help. That did indeed correct the problem.

I’m curious however to understand why an inline level element would add extra space like that. I searched online for an explanation but couldn’t find anything. Are you able to explain why this happens or do you know of an online article that covers this issue?

Eric

4

You can take a look at this: https://developer.mozilla.org/en/Images,_Tables,_and_Mysterious_Gaps

Instead of “cell table” read “div”; same principle holds :slight_smile:

5

That article was a great explanation of the mechanics behind this issue and now that I understand it, hopefully I’ll remember what to do if and when I encounter this again.

Thanks so much for the link and your help!

Eric