Increase span width not with text width - CSS
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.
开发者_如何学PythonThanks Jean
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 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.
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.
You can use display: inline-block
, if you use display: block
you will have to float: left
as well.
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. After doing this, you should float it to the left.
I hope this was of help.
The <span>
element in an inline element. Therefore, you cannot apply width
or height
.
精彩评论