按钮上的背景图像添加边距答案

【问题标题】：Background Image on Button Adds Margins按钮上的背景图像添加边距
【发布时间】：2013-09-07 19:12:33
【问题描述】：

我有一个联系表单，当您提交并且一切正常时，在您等待电子邮件发送时，会出现一个加载的 .gif 文件来代替按钮文本。但是，当我的 Javascript 添加图像时，会有一些额外的填充：

来自：到：

如果您仔细观察，按钮和文本框之间有额外的空间。虽然在这里看起来并不多，但当您看到它实时变化时，它会非常明显。按钮实际上并没有改变高度，并且.gif是使用background:#222 url('/somewhere/load.gif') no-repeat center center;设置的

为什么会发生这种情况，我该如何解决？

【问题讨论】：

信息不足，请编辑您的帖子以包含代码。对我来说，这看起来是一个相当简单的最小独立测试用例候选者。

标签： javascript html css forms button

【解决方案1】：

就像约翰说的那样，这里没有很多信息可供使用。

但是，如果您将 background-size: contain; 添加到包含您的 gif 的 id/class 中，则可能会起作用。

【讨论】：

【解决方案2】：

发生的事情并没有错，即使您可能想要不同的视觉效果。

我把你的两个按钮图片都拍下来了，如下叠加：

我将一张图像设为 50% 透明以对齐边缘。

在这两种情况下，按钮的高度相同。

发生的情况是，您的 GIF 图像的大小与按钮高度的大约 90% 相匹配。

相比之下，文本（“发送”）因为字体大小，没有。您可以通过调整字体大小、行高和内边距使文本更高，但您需要进行试验。

或者，使 GIF 的高度与字体大小相匹配。

说明性示例

查看演示：http://jsfiddle.net/audetwebdesign/FsNe2/

考虑两个相似的按钮：

<input class="ex1" type="submit" value="Send Ex 1">
<input class="ex2" type="submit" value="Send Ex 2">

使用以下 CSS：

input.ex1 {
    background: red url('http://placehold.it/60x60') no-repeat center center;
    font-size: 60px;
}
input.ex2 {
    background: red url('http://placehold.it/60x42') no-repeat center center;
    font-size: 60px;
}

在 Windows 7 PC 上的 Firefox 中，呈现如下图像：

在示例 1 中，我创建了一个 60x60 像素的背景图像，字体大小为 60 像素。在这种情况下，图像看起来比字母要高，因为字体自然会在字母上方和下方留出一些空间来说明升序和降序。

在示例 2 中，我将图像的高度降低到 42 像素，这更接近于大写 E 或 S 的高度。

您的标记没有任何问题，只需在创建设计元素时考虑这些印刷细节。

【讨论】：