Span Width - [SOLVED]

TL;DR Summary

If you try to set span width like you would on div element for example:

span {
  width: 500px;
}

It simply will not work.

What you need to do is change the display type of the span element which is by default inline.

span {
  display: inline-block;
  width: 500px;
}

And now you can see the span width actually changing and it is set to 500px. Background color is only used here so you can easily see the area that span element occupies.

And here is the full code used to generate the image above:

<style>
  body { 
    background-color: lightblue; 
  }
  div { 
    font-size: 40px; 
    margin-top: 300px;
    text-align: center; 
  }
  span {
    background-color: yellow;
    width: 500px;
    display: inline-block;
  }
</style>

<div>
  Do you know how to make
  <span>this span wide</span>
  and other text normal?
</div>

In short this is all you need to know about setting span width.

Until next time,
Will
Senior Developer & SEO Algo Specialist