Comment définir la propriété de hauteur pour SPAN

J'ai besoin de rendre le code suivant extensible avec une hauteur prédéfinie

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

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

Mais comme span est un élément en ligne, la propriété "height" ne fonctionnera pas.

J'ai essayé d'utiliser div à la place, mais il s'étendra jusqu'à la largeur de l'élément supérieur. Et la largeur doit être flexible.

Quelqu'un peut-il suggérer une bonne solution pour cela?

Merci d'avance.

Donnez-lui un display:inline-blockCSS - cela devrait lui permettre de faire ce que vous voulez.
En termes de compatibilité: IE6 / 7 va travailler avec cela, comme le mode Quirks suggère:

IE 6/7 accepte la valeur uniquement sur les éléments avec un affichage naturel: en ligne.

Utilisation

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

La seule astuce est la prise en charge du navigateur. Vérifiez si votre liste de navigateurs pris en charge gère le blocage en ligne ici .

c'est pour faire fonctionner display: inline-block dans tous les navigateurs:

Assez bizarrement, dans IE (6/7), si vous déclenchez hasLayout avec "zoom: 1" puis réglez l'affichage sur en ligne, il se comporte comme un bloc en ligne.

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

En supposant que vous ne vouliez pas en faire un élément de bloc, vous pouvez essayer:

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

Mais la solution la plus simple est de traiter simplement .titlecomme un élément de niveau bloc, et en utilisant les balises de titre appropriées <h1>par <h6>.

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

Pour que les travées fonctionnent comme une cellule de tableau (ou tout autre élément, d'ailleurs), la hauteur doit être spécifiée. J'ai donné une hauteur aux travées, et elles fonctionnent très bien - mais vous devez ajouter de la hauteur pour qu'elles fassent ce que vous voulez.

Une autre option bien sûr est d'utiliser Javascript (Jquery ici):

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

Pourquoi avez-vous besoin d'un span dans ce cas? Si vous voulez styliser la hauteur, pourriez-vous simplement utiliser un div? Vous pouvez essayer un div avec display: inline, bien que cela puisse avoir le même problème puisque vous feriez en fait la même chose qu'un span.