DEV Community

Cover image for Span Width - [SOLVED]
CyberBotMachines
CyberBotMachines

Posted on • Updated on

Span Width - [SOLVED]

TL;DR Summary

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

span {
  width: 500px;
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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

And if you want to speed up your coding career then check out my website for more info.

Until next time,
Will
Senior Software Developer

Discussion (0)