width 属性を span タグ スタイルに直接設定しても、何の効果もないことがわかります。
display:block が設定されている場合、width 属性が有効になりますが、このときのspanはdivと同じになります。
display:inline-block が設定されている場合、スパンは同じ行にリストされ、width 属性が有効になります。
要素の表示属性の一般的な値の説明:
1) block: ブロック オブジェクトのデフォルト値。オブジェクトを強制的にブロック オブジェクトとしてレンダリングし、オブジェクトの後に新しい行を追加します。
2) inline: インラインオブジェクトのデフォルト値。オブジェクトを強制的にインライン オブジェクトとしてレンダリングし、オブジェクトから行を削除します。
3) inline-block: オブジェクトをインライン オブジェクトとしてレンダリングしますが、オブジェクトのコンテンツはブロック オブジェクトとしてレンダリングされます。隣接するインライン オブジェクトは同じ行上にレンダリングされます。
4) 非: 隠しオブジェクト。可視性プロパティの非表示値とは異なり、非表示オブジェクト用に物理スペースを予約しません。