1

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>
Sniffit
  • 61
  • 8
  • Have you tried zeroing out the margins for the img tag? – steel May 29 '14 at 21:19
  • And are these all the rules being applied to your elements, or is there another set of style rules somewhere? – steel May 29 '14 at 21:20
  • 1
    make sure to set margins and paddings to zero, more simply just set `* { box-sizing: border-box }` – gomflo May 29 '14 at 21:21
  • That is the code that results in the linked screenshot (browser Safari). A `margin: 0` for `img` does not change the result. – Sniffit May 29 '14 at 21:23

1 Answers1

2

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

See Fiddle

Derek
  • 3,438
  • 1
  • 17
  • 35