调整之间的间距：在伪元素图像和文本之前

Question

我正在尝试调整位于文本之前的图像。但问题是由于字母表样式A，图像宽度占用了一些空间。

我创建了一个演示：

＆＃13;

＆＃13;

h1:before{
    content: url('http://s9.postimg.org/bg93v6bjf/image.png');
}

＆＃13;

<h1>pple</h1>

＆＃13;

＆＃13;

＆＃13;

JSFiddle：http://jsfiddle.net/squidraj/wott37vy/

如何减少A和p之间的空间，以便即使我调整浏览器的大小，它也会停留在同一个地方？

非常欢迎任何帮助。提前谢谢。

Answer 1

解决此问题的一种简洁方法是将伪元素的显示设置为inline-block，并为其指定宽度。

以下是现场演示：

h1:before{
    display: inline-block;
    content: url('http://s9.postimg.org/bg93v6bjf/image.png');
    width: 90px;
}

<h1>pple</h1>

JSFiddle版本：http://jsfiddle.net/wott37vy/3/

Answer 2

您可以对take away space使用否定的margin值。

＆＃13;

＆＃13;

h1:before{
    content: url('http://s9.postimg.org/bg93v6bjf/image.png');
}

h1 span {
    margin-left: -20px;
}

＆＃13;

<h1><span>pple</span></h1>

＆＃13;

＆＃13;

＆＃13;

Answer 3

我会将你的徽标包装在div中：

<div><h1>pple</h1></div>

然后给div一个固定的宽度，这样它就不会自行调整大小：

div {
    width: 180px;
}

Answer 4

这可能不是最漂亮的解决方案，但您可以在图像的右侧添加一个负边距，以使文本更接近，

h1:before {
    content: url('http://s9.postimg.org/bg93v6bjf/image.png');
    margin:0 -20px 0 0;
    padding:0;
}