SPANの高さプロパティを設定する方法

次のコードを事前定義された高さでストレッチ可能にする必要があります

<style>
.title{
   background: url(bg.gif) no-repeat bottom right;
   height: 25px;
}
</style>

<span class="title">This is title</span>

ただし、spanはインライン要素であるため、「height」プロパティは機能しません。

代わりにdivを使用してみましたが、上部要素の幅まで拡張されます。そして、幅は柔軟でなければなりません。

誰かがこれに対する良い解決策を提案できますか？

前もって感謝します。

それdisplay:inline-blockをCSSで与えてください-それはあなたが望むことをするようにするべきです。
互換性の観点から：癖モードが示唆するように、IE6 / 7はこれで動作します：

IE 6/7は、自然に表示される要素（インライン）でのみ値を受け入れます。

使用する

.title{
  display: inline-block;
  height: 25px;
}

唯一のトリックはブラウザのサポートです。サポートされているブラウザのリストがインラインブロックを処理するかどうかをここで確認してください。

これは、display：inline-blockをすべてのブラウザで機能させるためです。

奇妙なことに、IE（6/7）では、「zoom：1」でhasLayoutをトリガーしてから、表示をインラインに設定すると、インラインブロックとして動作します。

.inline-block {
    display: inline-block;
    zoom: 1;
    *display: inline;
}

それをブロック要素にしたくないと仮定すると、次のことを試してみてください。

.title  {
    display: inline-block; /* which allows you to set the height/width; but this isn't cross-browser, particularly as regards IE < 7 */
    line-height: 2em; /* or */
    padding-top: 1em;
    padding-bottom: 1em;
}

ただし、最も簡単な解決策は.title、をブロックレベルの要素として扱い、を<h1>介して適切な見出しタグを使用すること<h6>です。

スパン { display: table-cell; height: (your-height + px); vertical-align: middle; }

スパンがテーブルセル（またはその他の要素）のように機能するためには、高さを指定する必要があります。私はスパンに高さを与えました、そしてそれらはうまく働きます-しかしあなたはそれらがあなたが望むことをするようにするために高さを追加しなければなりません。

もちろん、別のオプションはJavascript（ここではJquery）を使用することです。

$('.box1,.box2').each(function(){
    $(this).height($(this).parent().height());
})

この場合、なぜスパンが必要なのですか？高さをスタイリングしたい場合は、divを使用できますか？でdivを試すこともできdisplay: inlineますが、実際にはスパンと同じことをしているので、同じ問題が発生する可能性があります。