1

I’m new to CSS and wondering if you can give me a little help. I have been working through some tutorials and was having a little play with some popup images.

I can’t for the life of me work out where the 4px gap is coming from between the thumbnails.

I wanted to space my little gallery with a 12px margin between the coloured squares, but it moves about quite strangely when i add in my own margin. Am I just doing it in the wrong way?

I have all my code here http://jsfiddle.net/p45JH/5/

Here is the CSS code im using:-

.thumbnail {
    position: relative;
    z-index: 0;
}
.thumbnail:hover {
    background-color: transparent;
    z-index: 50;
}
.thumbnail span {

    position: absolute;
    background-color: white;
    font-family:Arial, Helvetica, sans-serif;
    text-align:center;
    padding: 5px;
    left: -1000px;
    border: 1px solid #CCC;
    visibility: hidden;
    color: black;
    text-decoration: none;
}
.thumbnail span img {

    border-width: 0;
    padding: 2px;
    vertical-align:bottom;
}
.thumbnail:hover span {

    visibility: visible;
    bottom: 35px;
    left: 35px;

}

I’m sure it’s really simple, just my limited knowledge stopping me from figuring it out.

Thanks for any help you can offer.

Penfold0101
  • 87
  • 1
  • 1
  • 9

2 Answers2

0

Try using div instead of links, look if I remove the spaces between the links in the Html code : http://jsfiddle.net/soyuka/p45JH/6/

No spaces : (no padding/margin)

<a href=""> </a><a href=""> </a>

Spaces : (do a normal gap)

<a href=""> </a>
<a href=""> </a>
soyuka
  • 8,839
  • 3
  • 39
  • 54
  • i will have a play with this Monday when i get back....i never expected such a speedy respons! it looks to fix my problem. thanks Alot – Penfold0101 Feb 08 '13 at 16:21
0

It's whitespace. Spaces between inline (and inline-*) elements are honored. You can just comment them out:

<a class="thumbnail">...</a><!--
--><a class="thumbnail">...</a>

Or use one of the other techniques found here: http://css-tricks.com/fighting-the-space-between-inline-block-elements/

cimmanon
  • 67,211
  • 17
  • 165
  • 171
  • Thanks for the link and the posible soloution. i'm absorbing as much info as possible at the mo, so that link looks excellent. Thanks again. – Penfold0101 Feb 08 '13 at 16:21