Menu
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?
895
The main thing to remember about a span element is that it is an inline element, which means that you will not be able to set the width or height of it as is.
By default a span element has no dimension because its CSS display property is inline. If you want to give it a width, you should change that property to inline-block. Now you can play with its dimensions.
The span is an inline element, so the only way to change its width is to make it a block element or setting its display to inline-block.
n. 1. The extent or measure of space between two points or extremities, as of a bridge or roof; the breadth. 2. The distance between the tips of the wings of an airplane.
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
75
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> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
