CSSテキスト背景スパンパディング

Question

私はいくつかのダイナミックテキストに透過PNGの背景を追加し、それを文の周りのすべての方法を15ピクセルのパディングを与えるためにしようとしています。あなたが写真から見ることができるように

スパンクラスは、改行を持っていないテキストにパディングを追加する方法を知りません。このテキストはViewsスライドショーの一部で、数秒ごとに変わります。私は、文章中のブレークの左、右、後にパディングを追加したいと思います。リンクサンプルを参照してください。私はそれが文字を数え、パディングを追加できるので、私はPHPを使用する必要があるかもしれないと聞いた。誰もがこれを行う方法を知っていますか？このスパンクラスのパディングを与えると、改行の後ではなく、文の先頭と末尾にのみパディングが行われます。

http://visiongem.com/portfolio/span-class-help.jpg

HTMLとCSS以下の通りです：

.blueback {background-image:url(images/transparentback.png);} 



<div id="sliderhome"><div id="slidertitle"><span class="blueback">[title]</span> 
</div><div id="featureslider-list"><ul class="homepage-featureslider-list"> 
<span class="blueback"><li>[field_linkto_story_url]</li> 
<li>[field_linkto_photo_url]</li> 
<li>[field_linkto_video_url]</li></div> 
</ul></span></div> 

Answer 1

はそれで問題があることを、あるテキストにpaddingを追加し、table

.css{ 
    padding:10px; 
    display:table; 
} 

Answer 2

としてプロパティを表示インライン要素。私はそれがインライン - ブロック -level-要素でなければならないと思う少なくともすべてのブラウザが側面にパディングを追加する気がするでしょう。

スパン{表示：インラインブロック。パディング：6px 8px;/*私はそれは、高調波の割合* /}

私はSafariで上記のスタイルでマークアップを表示すると、それが動作のために役立ちますので、水平方向と垂直方向の個々の値を定義する傾向があります。表示タイプをちょうどインラインに変更することもできますが、それも機能しますが、側面が少し違って見えます。私は、すべてのブラウザは、それらの属性を解釈するために少し特殊な方法を持っていると思います。しかし、なぜあなたのニーズに合っていないのかという理由があります。文章の中の一つの単語をマーカーで強調表示するならば、周囲の言葉に端を切ってしまうので、その中のスペースを強調表示するのではなく、最初から最後の文字に近づけるだけです。とにかく、テキストマーカは、使用されているテキストがそれに影響を与えないように、それ自身のチップサイズを持ちます。これは、上と下のパディング値を強制的に受け入れる可能性があります。

私は、それがブラウザがあるため、実装のベースとなる思考の少し予測できない例1だと思います。

EDIT：ごめんなさい！私は投稿するのが遅すぎた。上記のテーブル設定は、十分に助けるかもしれません。