How to Set a Span Width in CSS


While many of the commands you create in an HTML or CSS document directly change the way your Web page appears, this is not necessarily true when you are referring to the span. The span groups elements on a Web page together, so that they perform in the way the CSS code specifically designates. In the CSS code, you must give the span a width to ensure that all the elements you want inside the span are included.

  • Log in to your Web server.

  • Open the HTML page on which you will include the span tag.

  • Insert the following CSS code in the section of the page where you want the span:

    span {
    width: 100px;

    display: block;

    background-color: red;


  • Replace "100" with a different number (in pixels) for the width of the span.

  • Publish the page.

Related Searches


Promoted By Zergnet



You May Also Like

  • How to Create Photo Albums With CSS

    Cascading Style Sheet (CSS) language provides a way to create an interactive photo gallery without a lick of JavaScript programming. Using the...

  • How to Span Columns in MS Excel

    If you have information that takes up more room than the size of a cell in Excel, you can merge the cells...

  • How to Set the Width of a Div

    The <div> element helps you format a Web page to create one ormore column displays and to attractively arrange text and images...

Related Searches

Check It Out

Geek Vs Geek: Robot battles, hoverboard drag race, and more

Is DIY in your DNA? Become part of our maker community.
Submit Your Work!