How to set height property for SPAN

Question

Hello guys.

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 1

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.

Answer 2

Give it block properties to give it size:

.title{
 display: block;
 background: url(bg.gif) no-repeat bottom right;
 height: 25px;
}

Answer 3

Give it a display:inline-block in CSS - that should let it do what you want.

Answer 4

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 5

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 6

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