不正确的 CSS 按钮高度计算答案

【问题标题】：Incorrect CSS Button Height computing不正确的 CSS 按钮高度计算
【发布时间】：2014-07-19 12:55:03
【问题描述】：

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

Example（对不起，我还不能发图）

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

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

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>

【问题讨论】：

您是否尝试过将 img 标签的边距归零？
这些都是应用于您的元素的规则，还是在某处有另一套样式规则？
确保将边距和内边距设置为零，更简单的是设置* { box-sizing: border-box }
这是生成链接截图的代码（浏览器 Safari）。 margin: 0 对应 img 不会改变结果。

标签： css image button height integrated

【解决方案1】：

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

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

试试这个：

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

See Fiddle

【讨论】：

谢谢，解决了！
您能解释一下为什么会这样吗？对齐会改变分配的空间，这很奇怪，不是吗？
@Marcel 我已经用解释更新了我的答案。基本上，额外的空间是为低于基线的字母保留的。
感谢您更新答案:)