CSS Width of a <Span> Tag

CSS width of a span tag

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>

How to set fixed width for span

Set the display property of the spans to inline-block like:

.container span {

  display: inline-block;

}

<div class="container">

  <div class="row"><span style="width:60px;background-color: red;">prefix1</span><span>prpr</span>

  </div>

  <div class="row"><span style="width:60px;background-color: red;">pre2</span><span>prpr</span>

  </div>

</div>

Does height and width not apply to span?

Span is an inline element. It has no width or height.

You could turn it into a block-level element, then it will accept your dimension directives.

span.product__specfield_8_arrow
{
    display: inline-block; /* or block */
}

CSS fixed width in a span

ul {

  list-style-type: none;

  padding-left: 0px;

}

ul li span {

  float: left;

  width: 40px;

}

<ul>

  <li><span></span> The lazy dog.</li>

  <li><span>AND</span> The lazy cat.</li>

  <li><span>OR</span> The active goldfish.</li>

</ul>

Issue with setting width of span tag

It's because inputs have default browser values like writing-mode & appearance and span elements are not.

If you give css to span like

span {
  appearance: auto;
  -webkit-writing-mod: horizontal-tb;
  width: 10%;
}

it will be works without change display property.

How to increase width of a span tag inside an li

you can't. span is an inline element, either set it's display property to inline-block or block to set its dimensions, or use a block element instead of span.

white-space: nowrap; // will force it not to wrap around

See effect on this fiddle: http://jsfiddle.net/Abp8y/11/ [UPDATED].

Last diagnosis: text-transform bug caught in the li tag. Removing text-transform solves the problem.

The Chrome bug is also discussed here: text-transform: uppercase causes layout error on Chrome as posted by @Christoph

CSS - width not honored on span tag

display: block will not help you here because when float is activated, the elements is automatically switched to block mode, whatever its initial mode, so your width should work.

The problem may be with the empty <span> tag which might not be rendered because of some obscure rule I cannot remember. You should try preventing your span from being empty, maybe by adding a   if the content is empty.

Set percentage width for span element

Define the element as an inline block and you can control the width and height like a block element while keeping it inline with surrounding content.

#element {
  display: inline-block;
  width: 50%;
}

---

Related Topics