How to set height property for SPAN

Question

I need to make following code stretchable with predefined height   lt style gt   title     background  url bg gif  no-repeat bottom right     height  25px     lt  style gt    lt span class  title  gt This is title lt  span gt    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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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  lt  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  lt h1 gt  through  lt h6 gt

User · Answer

Another option of course is to use Javascript  Jquery here        box1  box2   each function          this  height   this  parent   height

User · Answer

Use    title    display  inline-block    height  25px      The only trick is browser support  Check if your list of supported browsers handles inline-block here

[css] How to set height property for SPAN

Examples related to css

Examples related to height

Examples related to html