仅在不影响背景的情况下在文本上方留出空白的 CSS 代码？

Question

我有一个同时具有背景图像和文本的类。我试图找出一种方法来操纵“仅限文本”上方的空间，使用“边距”标签将改变整个事物（图像+文本）的位置。我只需要控制文本。

text-indent 让我可以控制水平间距，但我需要一些东西来更好地控制文本上方和下方的空间，前提是存在这种情况。

这是 CSS 类：

 .contactb { float:left; margin:0 5px 0 0; padding:0 0; background:url(images/contact_b.png) top no-repeat; display:block; width:108px; height:57px; font-family: 'hand-webfont'; color:black; font-size:17px; }

这是 HTML 代码：

 <li><a href="contact.html" class="contactb">Contact</a></li>

原文由 user1594603 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您只是在寻找“填充”：

 .myClass {
    padding-top: 10px
    padding-bottom: 10px;
}

原文由 Billy Moat 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

诀窍是将 padding 与 background-origin 结合起来……虽然，它仅在支持 CSS 3 的浏览器中受支持（不在旧的 Internet Explorer 版本中：在 Internet Explorer 9 之前）

这个

背景原点：边框框；

加上适当的 填充 对我来说很好……（背景原点的默认值是填充框，这就是原因，单独填充对你不起作用……）

原文由 Jan Hnila 发布，翻译遵循 CC BY-SA 4.0 许可协议