I created an example showing the current issue I have with styling a button that contains an image:
Example (sorry, I am not allowed to post images yet)
The height of the image (img) is 32 pixels, but the height of the surrounding button is 34 pixels and the height of the surrounding div is 36 pixels.
Where do the additional pixels come from?! I want these buttons to have a height of 32 pixels and get rid of the space in between the 2 buttons. I do not want to set a specific height for the buttons (e.g. 32px). They should adapt to the size of their content (image, text).
index.html
<!DOCTYPE HTML>
<html >
<head>
<meta charset="utf-8"/>
<style type="text/css">
div {
border: 0;
margin: 0;
padding: 0;
}
button {
border: 0;
padding: 0;
margin: 0;
}
</style>
</head>
<body>
<div>
<button><img src="img/site/buttons/32x32/add_user.png"> Benutzer hinzufügen</button>
</div>
<div>
<button><img src="img/site/buttons/32x32/add_user.png"> Benutzer hinzufügen</button>
</div>
</body>
</html>
The extra space comes from the vertical-alignment of the image.
The initial alignment of the image is baseline. There is extra space allowed below the text in order for characters which go below the baseline (g, j, q, etc.) and underline. So aligning the image to the baseline of the text leaves some extra space beneath.
Try this:
img {
display:inline-block;
vertical-align:middle;
}