CSS Span Width

Changing the width of a span is very simple, and the process is the same for any other element in which you would want to set a width.

In order to set the width of span, the CSS property of display: block; (if you want the span element on its own line) or display: inline; (if you want it to float left or right) must be used in conjunction with setting the span width.  Observe below.

HTML Example of span tag in use

This is a css span with width set

CSS

#span1 { 	
    width: 100px;
    display: block;
    background-color: red;
} 

Result:

This is a css span with width set

Share

Learn how to design amazing websites