90

I use <span> tags in my module titles, e.g.

<span>Categories</span>.

I specify the span's background color/image, width and height in css.

But the span's width depends on its content/text.

So, if I do <span></span>, with just a background image/color in css, nothing appears.

Of course, I want something to appear.

How can I resolve this?

quarkdown27
  • 658
  • 8
  • 15
mars-o
  • 1,695
  • 4
  • 23
  • 38
  • 4
    I'd just like to point out that this isn't a very good use of span. It's meant to mark short ranges of content within a larger whole, so it's intentionally not a block element by default. For titles, one of the h# tags would be best. Failing that, a div is still usually better than a span. – Chuck Mar 07 '09 at 06:47
  • thanks for your answers.. :D i find this a silly q'n to begin with.lol..so many years ago already. = )) – mars-o Jun 11 '14 at 21:50

8 Answers8

128

spans default to inline style, which you can't specify the width of.

display: inline-block;

would be a good way, except IE doesn't support it

you can, however, hack a multiple browser solution

cobbal
  • 69,903
  • 20
  • 143
  • 156
117

You could explicitly set the display property to "block" so it behaves like a block level element, but in that case you should probably just use a div instead.

<span style="display:block; background-color:red; width:100px;"></span>
Chris Fulstow
  • 41,170
  • 10
  • 86
  • 110
  • thanks, i see. that happens because span is inline. i now see the difference bet. inline & block displays. yes, div is appropriate.:D..thanks – mars-o Mar 07 '09 at 06:18
  • 4
    Using a DIV inside paragraphs, headers (h1,h2 etc) would break validation if you care about that. Another possible sollution is to use a span, display: block; and float: left; :) – Arve Systad Mar 09 '09 at 11:22
  • thanks, and the answer below was critical to get the width working – Satchel Feb 17 '10 at 02:36
  • 3
    it is better to use `inline-block` instead of `block` – Eugen Konkov Nov 27 '17 at 14:47
6

You can't specify the width of an element with display inline. You could put something in it like a non-breaking space ( ) and then set the padding to give it some more width but you can't control it directly.

You could use display inline-block but that isn't widely supported.

A real hack would be to put an image inside and then set the width of that. Something like a transparent 1 pixel GIF. Not the recommended approach however.

cletus
  • 616,129
  • 168
  • 910
  • 942
4

Like in other answers, start your span attributes with this:

display:inline-block;

Now you can use padding more than width:

padding-left:6%;
padding-right:6%;

When you use padding, your color expands to both side (right and left), not just right (like in widht).

Nohy bez hranic
  • 81
  • 5
4

You could try width: fit-content

source: https://developer.mozilla.org/en-US/docs/Web/CSS/fit-content

Daniela
  • 471
  • 7
  • 25
3

I would use the padding attribute. This will allow you add a set number of pixels to either side of the element without the element loosing its span qualities:

  • It won't become a block
  • It will float as you expect

This method will only add to the padding however, so if you change the length of the content (from Categories to Tags, for example) the size of the content will change and the overall size of the element will change as well. But if you really want to set a rigid size, you should do as mentioned above and use a div.

See the box model for more details about the box model, content, padding, margin, etc.

Kelly Hays
  • 33
  • 4
2

Use the attribute 'display' as in the example:

<span style="background: gray; width: 100px; display:block;">hello</span>
<span style="background: gray; width: 200px; display:block;">world</span>
Antonio
  • 2,406
  • 1
  • 16
  • 8
1

Having fixed the height and width you sholud tell the how to bahave if the text inside it overflows its area. So add in the css

overflow: auto;

user2130923
  • 11
  • 1