css - :before 疑似属性を使用した CSS 間隔

Question

:before を使用して配置しようとしている画像があります。画像を行の最初の文字に配置したい。ライブサイトを見ると、鳥の足が「C」の文字に触れているはずです。フィドルでは機能しますが、ライブサイトでは機能しません。何か助けはありますか？

http://imip.rvadv.com/index3.html

フィドル: http://jsfiddle.net/imakeitpretty/yV3kK/30/

Answer 1

#chirp:before{
margin-bottom:-20px;
}

現在、margin-bottom は -10px に設定されています。

それが役に立てば幸い！

Answer 2

jsfiddle とテスト サイトで異なるベース css を使用しています。

たとえば、font-family はすでに異なるため、2 つを実際に比較することはできません。

とにかく、inに設定margin-bottomすると問題が解決します。-20px#chirp:before

Answer 3

追加することを検討してください

.st-accordion ul li > a{
   line-height:27px;
   ...
}

そして、以下を更新します。

#chirp:before {
    ...
    margin-bottom:0;
    ...
}

Answer 4

:before 要素を絶対に配置してみることができます:

http://jsfiddle.net/yV3kK/31/

#chirp:before {
    content:url(http://imip.rvadv.com/images/chirp-bird.png);
    padding:0;
    display:block;
    width: 77px;
    height: 50px;
    position: absolute;
    top: -44px; 
    left: -35px;
}

#chirp{
    position:relative;    
}

Answer 5

私には問題のように見えline-heightます。36px（フォントサイズと同じ）に設定してみてください。原因はわかりませんが、あなたのサイトと JSFiddle でテキストの行の高さが異なっていると思われます。