How to set height property for SPAN

Question

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.

What's a good solution for this?

Answer 1

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.

Answer 2

Use

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

The only trick is browser support. Check if your list of supported browsers handles inline-block here.

Answer 3

this is to make display:inline-block work in all browsers:

Quirkly enough, in IE (6/7) , if you trigger hasLayout with "zoom:1" and then set the display to inline, it behaves as an inline block.

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

Answer 4

Assuming you don't want to make it a block element, then you might try:

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

But the easiest solution is to simply treat the .title as a block-level element, and using the appropriate heading tags <h1> through <h6>.

Answer 5

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

For spans to work like a table-cell (or any other element, for that matter), height must be specified. I've given spans a height, and they work just fine--but you must add height to get them to do what you want.

Answer 6

Another option of course is to use Javascript (Jquery here):

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

Answer 7

In some case you may want to adjust a SPAN height without changing display : inline.

To solve this, you can add a top and/or bottom border property, setting the required width parameter to your needs, and a transparent color to hide that border :

.myspan {
   border-top : solid 3px transparent;
   border-bottom : solid 3px transparent;
}

Answer 8

.my-span {
    border: solid 1px;
    border-color: gray;
    border-radius: 6px;
    padding-left: 5px;
    padding-right: 5px;
    height: 17px;
    padding-top: 6px;
    display: inline-block;
    line-height: 0px;
}

Answer 9

Why do you need a span in this case? If you want to style the height could you just use a div? You might try a div with display: inline, although that might have the same issue since you'd in effect be doing the same thing as a span.