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

Question

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

自： 至：

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

设置.gif

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

Answer 1

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

但是，如果你将background-size: contain;添加到包含你的gif的id / class，那可能会有效。

Answer 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像素的背景图像，字体大小为60px。 在这种情况下，图像看起来比字母高，因为字体在字母上方和下方自然留下一些空间，以说明上升和下降。

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

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