Cómo establecer la propiedad de altura para SPAN

Necesito hacer que el siguiente código sea estirable con una altura predefinida

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

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

Pero dado que span es un elemento en línea, la propiedad "height" no funcionará.

Intenté usar div en su lugar, pero se expandirá hasta el ancho del elemento superior. Y el ancho debe ser flexible.

¿Alguien puede sugerir alguna buena solución para esto?

Gracias por adelantado.

Dale un display:inline-blockCSS, eso debería permitirle hacer lo que quieras.
En términos de compatibilidad: IE6 / 7 será trabajar con esto, como modo de peculiaridades sugiere:

IE 6/7 acepta el valor solo en elementos con una visualización natural: en línea.

Utilizar

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

El único truco es la compatibilidad con el navegador. Compruebe si su lista de navegadores compatibles maneja el bloqueo en línea aquí .

esto es para que display: inline-block funcione en todos los navegadores:

Curiosamente, en IE (6/7), si activa hasLayout con "zoom: 1" y luego configura la pantalla en línea, se comporta como un bloque en línea.

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

Suponiendo que no desea convertirlo en un elemento de bloque, entonces puede intentar:

.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;
}

Sin embargo, la solución más fácil es tratar simplemente el .titlecomo un elemento en bloque, y el uso de las etiquetas de encabezado correspondiente <h1>a través <h6>.

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

Para que los tramos funcionen como una celda de tabla (o cualquier otro elemento, para el caso), se debe especificar la altura. Le he dado una altura a los tramos y funcionan bien, pero debes agregar altura para que hagan lo que quieres.

Otra opción, por supuesto, es usar Javascript (Jquery aquí):

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

¿Por qué necesita un tramo en este caso? Si desea diseñar la altura, ¿podría usar un div? Puede probar un div con display: inline, aunque eso podría tener el mismo problema, ya que de hecho estaría haciendo lo mismo que un span.