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?

Reproduction

You should use heading tags (h1, h2, h3, ...) for titles. It's more semantically correct. – Sanfordsanfourd

Yes, you are right Pickels. Thanks everyone for your help. This is my final css. It works great for me: <style> h4 { display: inline-block; zoom: 1; *display: inline; margin: 0px; height: 25px; } </style> – Reproduction

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.

Choi

For what it's worth, IE7 doesn't support inline-block. – Moving

Np. @Scott: I don't see that on W3 -- here's what they say: Note: No versions of Internet Explorer (including IE8) support the property values "inline-table", "run-in", "table", "table-caption", "table-cell", "table-column", "table-column-group", "table-row", or "table-row-group". – Choi

@henasraf - @Scott's correct, I can't use it because of quicks as well: quirksmode.org/css/display.html – Ianteen

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

Another workaround is to maybe have a padding-bottom:? to it? – Choi

Ahah, I guess it will work if applied to a span then. Thanks for the info, henasraf. – Moving

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.

Octaviaoctavian

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

Boser

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

Mccluskey

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.

Bunkhouse

Answer 6

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

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

Clarabelle

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

Maricamarice

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

Averell

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.

Mcwhirter

Or, ignore my ramblings altogether and use henasraf's answer :) – Mcwhirter

Down voting comments just discourages those who want to legitimately contribute. Stop it! Just offer some constructive feedback instead, or probably more to the point, your own opinion on the matter. – Tod