How to set fixed width for span

Question

see my screenshot, even I set width, the span width still be "auto"

here is my

<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>

Possible duplicate of [CSS fixed width in a span](http://stackoverflow.com/questions/257505/css-fixed-width-in-a-span) — Michał Perłakowski, Feb 20 '16 at 04:49

score 61 · Accepted Answer · answered Feb 20 '16 at 04:45

61

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>

An inline element occupies only the space bounded by the tags that define the inline element (MDN).

answered Feb 20 '16 at 04:45

j08691

204,283
31
260
272

That's just the way inline elements are designed to work. You can get more details at the link I posted in my answer as well as at https://www.w3.org/TR/CSS2/visudet.html#inline-width – j08691 Feb 20 '16 at 14:14
thank you, more on `inline-block` at the excellent CSS-Tricks site: https://css-tricks.com/when-do-you-use-inline-block/ – Kai Carver Jan 30 '23 at 06:38

score -1 · Answer 2 · answered Feb 20 '16 at 04:44

-1

 Just use 

<div class="container">
<div class="row" style="width:auto;background-color: red;"><span>prefix1</span><span>prpr</span></div>
<div class="row" style="width:auto;background-color: red;"><span>pre2</span><span>prpr</span></div>
</div>

answered Feb 20 '16 at 04:44

Ashish Patel

772
5
12

How to set fixed width for span

2 Answers2