1

我创建了一个示例，显示了我在设置包含图像的按钮时遇到的当前问题：

示例 （对不起，我还不能发布图片）

图像 ( img) 的高度为 32 像素，但周围的高度button为 34 像素，周围的高度div为 36 像素。

额外的像素从何而来？！我希望这些按钮的高度为 32 像素，并消除两个按钮之间的空间。我不想为按钮设置特定的高度（例如 32px）。他们应该适应其内容（图像、文本）的大小。

索引.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>
4

1 回答 1

2

额外的空间来自图像的垂直对齐。

图像的初始对齐是baseline。文本下方允许有额外的空间，以便用于低于基线的字符（g、j、q 等）和下划线。因此，将图像与文本的基线对齐会在下方留下一些额外的空间。

尝试这个：

img { 
    display:inline-block; 
    vertical-align:middle; 
}

见小提琴

于 2014-05-29T21:24:20.150 回答