HTML/CSS: Have images besides eachother

Heres my i开发者_运维知识库ssue + code: http://jsbin.com/oyusa3/edit

If you can see there is spaces between the images and under it, which I do not want. I cant find where I have specified it should do this?

How can I fix this? And the even if i specified width the box just get full large width(see the border)

<img> is an inline element, like text, so it will always have spaces between when there's white-space. Try removing the white-space between the images, and they will close the gap.

See here:

http://jsbin.com/oyusa3/2/edit

As with most things CSS, there are many ways going around this. See the other answers that illustrate how to use float or display: block (to make it not inline) or removing the letter-spacing.

This is because a line break is rendered as a space when it is between inline elements. Either remove the line breaks in your source code, or decrease the font-size and the letter-spacing.

.items { font-size: 0px; letter-spacing: -2px; }

That is happening because img is an inline element - that is, essentially becomes something which is part of the flow of the text. Since there is some space between them in the markup, there is a space character in the output.

To remove this, you can either remove the whitespace in the markup, or change them to use styles along these lines:

img {
    display: block;  /* no longer an inline element */
    float: left;     /* element will contract width to as small as it needs to be */
                     /* and push it left */
}

This might cause you some issues in terms of the container no longer containing though. You can either have another element clear: left (or both) to push the bottom down, or have the container floated too. That would depend on your overall layout I think.

Try setting the margin and padding of all of the images to 0 and try floating them left.

Remove the gaps between the image tags:

<img style="width: 48px; height: 60px; margin: 0px;" src="http://www.americaabroadmedia.org/uploads/assets/images/BIO_Frank_122x160_2dLDn73C.jpg" url="profil.php?id=103" title="Meg Meg"><img style="width: 48px; height: 60px; margin: 0px;" src="http://www.americaabroadmedia.org/uploads/assets/images/BIO_Frank_122x160_2dLDn73C.jpg" url="profil.php?id=3" title="Ani Paltian"><img style="width: 48px; height: 60px; margin: 0px;" src="http://www.americaabroadmedia.org/uploads/assets/images/BIO_Frank_122x160_2dLDn73C.jpg" url="profil.php?id=104" title="Rafo Oganesian"><img style="width: 48px; height: 60px; margin: 0px;" src="http://www.americaabroadmedia.org/uploads/assets/images/BIO_Frank_122x160_2dLDn73C.jpg" url="profil.php?id=86" title="Megan Fox"><img style="width: 48px; height: 60px; margin: 0px;" src="http://www.americaabroadmedia.org/uploads/assets/images/BIO_Frank_122x160_2dLDn73C.jpg" url="profil.php?id=92" title="Peter Pede"> 

Also as a comment on your code, it is much better to modularise your CSS in a style sheet as supposed to inline, as it makes it a lot easier to maintain.