从顶部和底部切断的按钮图标

Question

我的按钮的顶部和底部区域被切断。它只允许我的图标与我按钮的文字高度相同。我试过隐藏溢出，我试着扩展按钮填充。

HTML：

<div id="toprow">
    <div id="homeDiv">
        <a href="#"><button type="button" id="homeBtn"><span>HOME</span></button></a>
    </div>
</div>

CSS：

#homeDiv{
    float:left; margin-left:160px;}
a #homeBtn span{
    background:url(home.png) no-repeat;
    padding-left: 45px;
    background-position: 0px -10px;}

#homeBtn{
    font-size:1em;
    outline:none;
    background:none;
    border:none;
    cursor: pointer;
    }

Answer 1

在此规则中

a #homeBtn span{
    background:url(home.png) no-repeat;
    padding-left: 45px;
    background-position: 0px -10px;}

添加：background-size: contain;

应该使图标img足够小以适合其容器。

编辑/添加：将背景位置重置为0px 0px，或重置为导致您满意的位置的设置。

Answer 2

默认情况下，锚标记是内联元素。您可以尝试将链接更改为显示块或内联块。原因是内联元素不受顶部和底部填充的影响。我不记得我的头脑，但同样可能也适用于保证金。 display: inline-block;代码

上的<a>

编辑： 对不起，没有注意到span标签。因此<span>标记也是内联的。由于您将图像用作背景，因此元素仅适合文本大小，因此您可以尝试约翰内斯的建议。