CSS仅对第一行应用保证金

Question

我有一个图标集,使用CSS类来相应地显示它们.就像说,这样:

<div class="icon anchor">This is some text!<br>This is some text!</div>

这将显示图标,但由于图标是背景图像,因此必须将文本移到一边,以腾出空间,使文本不会覆盖图像.这就是我的问题所在.文本被移到一边,但所有文本都被移到一边.我只想要移动需要的东西(可能是第一行).这是我的CSS:

.icon {
    background-repeat: no-repeat;
    padding-left: 17px;
}
.icon.anchor{ 
    background-image: url(fugue-icons-3.0-src/icons/anchor.png); 
}

Answer 1

如果要缩进第一行文本,则正确的CSS属性是text-indent属性.它将左边距(或从右到左语言的右边距)设置为任何块容器的第一行.在这种情况下,CSS将是

.icon {
    background-repeat: no-repeat;
    text-indent: 17px;
}
.icon.anchor{ 
    background-image: url(fugue-icons-3.0-src/icons/anchor.png); 
}

在jsFiddle看到它的实际效果.