CSS Lining up images. Always 1px difference. Why/How?

Answer 1

Have you checked the image doesn't include any white space to confuse the spacing issue?

Answer 2

sounds like 2 things maybe happening,

first is the most obvious that has to do with the relative positioning in css check here for more.

second is that it could be rendering a default border so add this to your styles an see what happens:

*
{
   border:none;
}

Answer 3

Try using a CSS reset.

Sounds like it could be a margin issue, padding issue or border issue.

Try:

* { margin:0; padding:0; border:0; outline:0; }

Answer 4

I'd go with Craig answer for the reset CSS style-sheet , or if you are building a full website maybe you can try something like a CSS framework, like 960.gs or Blueprint for instance, which already include reset css behavior.

These are good solutions with a relatively low footprint and ensure your website presentation is 99.99% cross-browser compliant.

On another note, getting some information would help out, like the original image width and height, your image width and height, your html markup displaying the image , and your CSS style.

Sorry for the English if any mistake comes in.

Answer 5

Not sure if this is still an issue for you, but I recently had this problem with an image, for some reason I was getting an extra 2px of space on the bottom of the image no mater how many other styles I striped off my page but I was able to fix it very easily:

   .divname img { display:block; }

This may or may not work for you.

Answer 6

Thomas, in Firefox try highlighting the 'Like' button, right click and choose view selected source. I've looked at three sites to check for consistency, and all three show that the 'Like' text is wrapped in a table, div, span, and anchor; all could alter the spacing depending on how the styling is done.

If you have firebug installed in FF you can play around with the CSS and see what it takes to get your alignment corrected a little easier. Keep in mind borders, padding, margins, line-height, cellspacing/padding, etc.