Question

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

Example （抱歉，我暂时无法发布图片）

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

附加像素来自哪里？！我希望这些按钮的高度为32像素，并摆脱2个按钮之间的空间。我不想要为按钮设置特定高度（例如32px）。他们应该适应他们的内容的大小（图像，文本）。

的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>

Answer 1

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

试试这个：

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

See Fiddle

CSS按钮高度计算不正确

1 个答案: