我创建了一个示例来展示我在设置包含图像的按钮样式时遇到的当前问题:
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>
最佳答案
额外的空间来自图像的垂直对齐。
图像的初始对齐方式是baseline。文本下方允许有额外的空间，以便字符低于基线(g、j、q 等)和下划线。因此，将图像与文本的基线对齐会在下方留下一些额外的空间。
试试这个:
img {
display:inline-block;
vertical-align:middle;
}
关于css - 不正确的 CSS 按钮高度计算，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23943156/