Typically, we'll set the following properties (for an image on the right, for example):
ImageAlign: MiddleRight TextAlign: MiddleLeft
You'll want to align both the text and image in a similar fashion. Outside of that, make sure that you are setting the Image property, not the BackgroundImage property and make sure you are doing the icon to plain bitmap conversion properly. Have you tried a plain bitmap file?
Just a question: are you positive that the bitmap contains no information on the top of the note image? I have had that happen to me more than once where a crop looked right in Photoshop and came out incorrect in the live code... :)
If that were the case your code may be perfect ;)
I just encountered a similar problem, which I was able to solve by thinking really hard. (Ain't those situations great?)
First it's important to understand that ImageAlign does NOT mean where on the button do you want the image. It means what point (pixel) on the image should be used for positioning. So if you pick "TopLeft", then the top-left-most pixel of the image will be vertically CENTERED on the button.
The problem comes in when you have a button with a centered image, whose ImageAlign is set vertically to "center", and whose dimensions are of an even number of pixels. Your image is 16x16 pixels- 16 is an even number. The middle pixel would theoretically be somewhere between pixel 8 and pixel 9. Since there is no pixel 8.5, VB rounds down to 8, thereby using pixel 8 as your positioning pixel. This the root cause of your unwanted upper margin.
Your button has an odd pixel height (23px) which means it has a true center pixel- pixel 12. VB tries to position the image's center pixel (8) on top of the button's center pixel (12). This puts 8 of the image's pixels BELOW center, and 7 pixels ABOVE center. To even things out, a 1-pixel margin appears above the image.
Here's the solution: Pad the image with 1 extra row of pixels on the bottom. The image now has a height that's odd (17 px), giving the image a true center pixel which can line up perfectly with the button's center pixel.
That's how I solved the problem for myself. However, a simpler possible solution just occurred to me. You could probably achieve the same result by assigning the image a bottom margin of 1px. I have not tested this solution but it seems theoretically equivalent to the first solution.
Additional note: Two objects of EVEN dimensions should theoretically be able to center-align perfectly. But strangely enough, the alignment problem occurs even if the button AND the image BOTH have even dimensions. (Apparently the compiler is not consistent in the way it determines the center pixel of one control vs another.) Nonetheless, in this case, the same solution applies.