Forums

markomarkogame

Hello, so a problem that i encountered on my website and then also on a another site ( which is made following the tutorial) is bugging me.

The space or padding / margin I'm talking about you can see on the picture: Picture of it Here is the website so you can check out the code/css and tell me where the problem is.

So what is causing that margin or padding below the picture ?

CrocoDillon

.portfolio-item > a > img {
    display: block;
    vertical-align: top;
}

It has to do with baseline alignment of the image, either make the image a block element or set vertical-align to top. So you need only one of the above examples, not both.

sloveland

I also got rid of the space by adjusting the link around the image, but I believe the solution above is more elegant. regardless, here's the code:

.portfolio-item > a {
  display: block;
  line-height: 1em;
}

FatStraw

#content .portfolio-item p.btn a {
  display: block; width: 183px; height: 29px; padding: 7px 0 0 0;
  background: url(http://line25.com/wp-content/uploads/2011/portfolio-website/demo/images/see-more-bg.png);
  font-weight: bold; text-align: center; text-transform: uppercase;
   text-decoration: none;
}

That "space" you see is because of the above code. It's inserting an image.

Edit: I agree with CrocoDillon"s solution :)

markomarkogame

  .portfolio-item > a > img {
    display: block;
    vertical-align: top;
}

And all that time i was doing this: .portfolio-item a{ display:block; } instead of this at the top

Thank you, saved me from this mystery :)

treehouse : what would you like to learn today?

Forums

[Solved] Padding/margin that I didn't put