Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Derek Gella
Derek Gella
15,215 Points

How to get rid of empty space inside of <li> that contains an <img> and <p> nested in an <a>. www.derekgella.com

Can anyone tell me how to get rid of the strange bar of whitespace I'm seeing inside of my list elements <li>? The <li> contain an anchor element which contains an img and paragraph of text. There seems to be whitespace between the image and paragraph depending on the size of the <li> and its contents. Anyone know how I can get rid of this whitespace? Go to www.derekgella.com to see the page with the problem.

3 Answers

Joel Bardsley
Joel Bardsley
31,258 Points
Joel Bardsley
Joel Bardsley
31,258 Points

As an image is an inline element, it has a default vertical-align property of baseline, which creates the space underneath. In your css, just add this property to your gallery image elements and it should be taken care of:

#gallery img {
  vertical-align: top;
}

Screenshot for reference

Derek Gella
Derek Gella
15,215 Points

worked like a charm. thanks!

Idan Melamed
Idan Melamed
16,285 Points
Idan Melamed
Idan Melamed
16,285 Points

For some reason the gap is created because of the closing anchor tag. I'm not sure why.

Try the next setting, see if it helps:

#gallery li a p {
  margin-top: -5px;
}
Idan Melamed
Idan Melamed
16,285 Points
Idan Melamed
Idan Melamed
16,285 Points

I support Joel's answer! :-)