Why are the buttons popping out of the text instead of beneath it?

http://jsbin.c开发者_如何学Goom/ovuci5

To rephrase, the buttons are higher than text - but why don't they expand below it, and instead create an empty space above the text?

(How) can this be changed?

You can use the vertical-align property.

Add:

vertical-align: top;

to the CSS style for your buttons if you want them to "pop" the other way.

Use the vertical-align: middle; CSS property on the image to achieve your needs

in your case :

.plus {
    background-image: url("http://www.veryicon.com/icon/preview/SystemIcons%20for%20Developers/plus%20Icon.jpg");
    display: inline-block;
    height: 32px;
    vertical-align: middle;
    width: 32px;
}