Question

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

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>

任何帮助都会受到赞赏。

Answer 1

你正在寻找的只是'填充'。

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

Answer 2

以下是我认为你要做的事情的一个有效例子：http://jsfiddle.net/yhV78/

诀窍：

创建一个包含背景图片的div（在我的例子中，背景是兔子）
创建包含内容的内部div（或一系列div）。您可以通过调整内部div上的填充或通过相对和绝对定位的组合来定位它们。

Answer 3

诀窍是将填充与background-origin结合起来...... 但是，它仅支持支持CSS3的浏览器（不适用于较旧的IE版本：＆lt; IE9）

此

<强>背景来源：边界框;

加上适当的填充对我来说很好...... （background-origin的默认值是padding-box，这就是原因，单独的填充对你不起作用......）

CSS代码到文本上方的边距空间只是在不影响背景的情况下？

3 个答案: