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

HTML How to Make a Website Responsive Web Design and Testing Build a Three Column Layout

Mayur Pande
PLUS
Mayur Pande
Courses Plus Student 11,711 Points

My 2nd and 4th image are creating some extra padding or margin at the bottom

The second and fourth image in my gallery are adding some extra padding or margin at the bottom even though I have set the margin to 0. I also checked on the debugger/developer tools and it is correct. Not sure where I have gone wrong.

Here is my site

1 Answer

Damien Watson
Damien Watson
27,419 Points

Two of the descriptions have the full stop outside the paragraph tags. Move it inside and it should fix up.

<a href="img/numbers-09.jpg">
  <img src="img/numbers-09.jpg" alt="">
  <p>Drips created using photoshop brushes</p>.
</a>

<!-- Should be -->

<a href="img/numbers-09.jpg">
  <img src="img/numbers-09.jpg" alt="">
  <p>Drips created using photoshop brushes.</p>
</a>
Mayur Pande
Mayur Pande
Courses Plus Student 11,711 Points

Thank you that was a silly mistake.

It fixed the fourth image i.e. numbers-09. But the first image (numbers-01) still had the text wrapping around creating a padding at the bottom so I decreased that to 4%.

Here is what I done to the css;

#gallery li a p{
  margin: 0;
  padding: 4%;
  font-size: 0.75em;
  color: #bdc3c7;
}

And this is the website updated please let me know if there is anything else that I have done wrong.

Many thanks again