我正在尝试调整位于文本之前的图像。但问题是由于字母表样式A,图像宽度占用了一些空间。
我创建了一个演示:
h1:before{
content: url('http://s9.postimg.org/bg93v6bjf/image.png');
}

<h1>pple</h1>
&#13;
JSFiddle:http://jsfiddle.net/squidraj/wott37vy/
如何减少A和p之间的空间,以便即使我调整浏览器的大小,它也会停留在同一个地方?
非常欢迎任何帮助。提前谢谢。
答案 0 :(得分:2)
解决此问题的一种简洁方法是将伪元素的显示设置为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/
答案 1 :(得分:1)
您可以对take away space使用否定的margin
值。
h1:before{
content: url('http://s9.postimg.org/bg93v6bjf/image.png');
}
h1 span {
margin-left: -20px;
}
&#13;
<h1><span>pple</span></h1>
&#13;
答案 2 :(得分:0)
我会将你的徽标包装在div中:
<div><h1>pple</h1></div>
然后给div
一个固定的宽度,这样它就不会自行调整大小:
div {
width: 180px;
}
答案 3 :(得分:0)
这可能不是最漂亮的解决方案,但您可以在图像的右侧添加一个负边距,以使文本更接近,
h1:before {
content: url('http://s9.postimg.org/bg93v6bjf/image.png');
margin:0 -20px 0 0;
padding:0;
}