<span>タグのCSS幅

<span>モジュールのタイトルにタグを使用しています。

<span>Categories</span>.

スパンの背景色/画像、幅、高さをcssで指定します。

ただし、スパンの幅はそのコンテンツ/テキストによって異なります。

したがって、<span></span>cssの背景画像/色だけで、そうすると、何も表示されません。

もちろん、何か出て欲しいです。

どうすればこれを解決できますか？

displayプロパティを明示的に「block」に設定してブロックレベルの要素のように動作させることもできますが、その場合は、代わりにdivを使用する必要があります。

<span style="display:block; background-color:red; width:100px;"></span>

スパンのデフォルトはインラインスタイルで、幅を指定することはできません。

display: inline-block;

IEがサポートしていない場合を除いて、良い方法です

ただし、複数のブラウザソリューションをハックすることはできます

インライン表示で要素の幅を指定することはできません。改行しないスペース（）のように何かを入れてから、パディングを設定して幅を広げることもできますが、直接制御することはできません。

display inline-blockを使用することもできますが、それは広くサポートされていません。

実際のハックは、画像を中に入れて、その幅を設定することです。透明な1ピクセルGIFのようなもの。ただし、推奨されるアプローチではありません。

padding属性を使用します。これにより、要素がスパン品質を失うことなく、要素のいずれかの側に設定された数のピクセルを追加できます。

• ブロックにはなりません
• 期待通りに浮きます

ただし、このメソッドはパディングにのみ追加されるため、コンテンツの長さを変更すると（たとえば、カテゴリからタグに）、コンテンツのサイズが変更され、要素の全体的なサイズも変更されます。ただし、本当に固定サイズを設定したい場合は、上記のように行い、divを使用する必要があります。

参照ボックスモデルなどボックスモデルの詳細については、内容、パディング、マージンを、

他の回答と同様に、次のようにスパン属性を開始します。

display:inline-block;  

これで、幅以上のパディングを使用できます。

padding-left:6%;
padding-right:6%;

パディングを使用すると、色は（widhtのように）右だけでなく、両側（右と左）に拡大します。

次の例のように、属性 'display'を使用します。

<span style="background: gray; width: 100px; display:block;">hello</span>
<span style="background: gray; width: 200px; display:block;">world</span>

高さと幅を固定したら、その中のテキストがその領域をオーバーフローした場合のベイブ方法を説明します。したがって、CSSを追加します

オーバーフロー：自動;