Increase span width not with text width - CSS

Question

Hi,

I am trying to increase the width of #Item, but it increases only with text width.

HTML

<div><span class="Item">Brand Strategy:</span><span class="Summary">Strategy</span></div>

CSS

.Item{background-color:#000; height:40px; color:#FFF; text-align:center; width:200px;}

How do I get the specified width for #Item.

Thanks Jean

Answer 1

The span is inline element, you can not apply width or height to it unless you make it block-level element like this:

span.Item{
   display:block;
   background-color:#000;
   height:40px;
   color:#FFF;
   text-align:center;
   width:200px;
}

Or you can set the display to inline-block to support old dumb IE versions.

More Info:

• Block-Level vs. Inline Elements

Alternatively, you can use a div to apply the width if you want.

Answer 2

I wrote part of this in comments above, but rewriting here for further clarification.

<span> is an inline element. Inline elements can't have a fixed width; their width is determined by the width of the text they contain, plus the margins and paddings.

See http://stackoverflow.com/questions/257505/css-fixed-width-in-a-span

You can change this behavior by turning your span into a block-level element. This is done by setting display: block or display: inline-block. But this also introduces other behavior, such as floating and taking up a whole line instead of staying inside the paragraph. This, again, can be countered by float: left and similar options. Weigh the different options and decide based on your needs.

In your specific code example, you might benefit from using <dt> and <dd> tags instead. They were built for exactly that purpose.

Answer 3

You can use display: inline-block , if you use display: block you will have to float: left as well.

Answer 4

.Item{background-color:#000; height:40px; color:#FFF; text-align:center; width:200px; display:inline-block;}