How to set height property for SPAN

Kelvin picture Kelvin · Feb 26, 2010 · Viewed 141.6k times · Source

I need to make following code stretchable with predefined height

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

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

But since span is inline element, "height" property won't work.

I tried using div instead, but it will expand up to the width of upper element. And the width should be flexible.

Can anyone suggest any good solution for this?

Thanks in advance.

Answer

casraf picture casraf · Feb 26, 2010

Give it a display:inline-block in CSS - that should let it do what you want.
In terms of compatibility: IE6/7 will work with this, as quirks mode suggests:

IE 6/7 accepts the value only on elements with a natural display: inline.