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

I have implemented a Facebook Like button into my site.

I wanted to make other buttons which fit the same style as the like button. I made them the same height as the like button, yet regardless my button would appear one pixel above, or below the like button - this was really obvious and looked bad.

Now I am relatively new to CSS, and I dont know what best practices are.

Using Firebug, I tracked back, and worked out that FBML (however it works) is producing a span within which the like button is contained. I assumed this had something to do with the problem.

My resolution was as follows

<div style="display: inline; position: relative; top: 1px;">
    <img src="images/button.png">
</div>

<fb:like layout="button_count" show_faces="false"></fb:like> 

I would be really grateful (for my knowledge) if someone could explain why the FB like button was showing this behaviour, and if how I have fixed it is the best resolution?

Also as a general aside... I have eventually gotten my page displaying exactly as I want. To do this I have utilized 25 <div>s. This seemed a lot - although my page is somewhat complicated. Is this OK?

Thanks a lot!

EDIT My div usage is for positioning elements. For example, I want some content to appear on the left and some on the right, so i have a two divs of 50% width side by side.

Then I want a button to appear centered so I have a div with text-align:center; I have done this as i was informed that this was preferable to </center.

After this again i want things on the left and right so i have the same class as the first point output twice again.. This is padded, I want a border around the content. As such I have another div inside which has border:1px solid black;

Is this correct/acceptable usage? 开发者_StackOverflow中文版Thx

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

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.

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.

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;
}

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; }

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.

Try wrapping the button code in a <div class="whatever"> and use the following CSS:

div.whatever {
   diaplay: inline;
   margin-top: -1;
}

Negative margins usually work for nudging elements.