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 Shaun Russell
.a{fill-rule:evenodd;}techdegree seal-36
Shaun Russell
Front End Web Development Techdegree Graduate 18,510 Points

Why is there content area underneath my img? Where is is coming from?

If you use the developers tools, you can see that there is a roughly 6px strip of content area underneath the image. From my understanding, the height of the containing div should be determined by the height of the content within, unless specified otherwise in the CSS. Any ideas?

<div class="container">
    <img src="https://upload.wikimedia.org/wikipedia/commons/f/f9/Phoenicopterus_ruber_in_S%C3%A3o_Paulo_Zoo.jpg/>
</div>

.container {
  width: 33%;
}
img  {
  width: 100%;
  height: auto;
}

1 Answer

Steven Parker
Steven Parker
243,656 Points
Steven Parker
Steven Parker
243,656 Points

That's the sub-baseline area reserved for font descenders.

You get that because images are displayed "inline" and aligned to the baseline by default.

Two ways to make it go away would be to add either of these (you don't need both) to your img CSS rule:

  • vertical-align: bottom; (or top, middle, sub)
  • display: block;
Shaun Russell
.a{fill-rule:evenodd;}techdegree seal-36
Shaun Russell
Front End Web Development Techdegree Graduate 18,510 Points

Thank you! Spent the better part of a day trying to figure that out.