Ширина CSS тегу <span>

Я використовую <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 його не підтримує

однак ви можете зламати рішення для декількох браузерів

Ви не можете вказати ширину елемента з вбудованим відображенням. Ви можете вкласти в нього щось на зразок нерозривного пробілу (), а потім встановити відступ, щоб надати йому трохи більше ширини, але ви не можете керувати ним безпосередньо.

Ви можете використовувати вбудований блок відображення, але це не широко підтримується.

Справжнім хаком було б помістити всередину зображення, а потім встановити ширину. Щось на зразок прозорого 1-піксельного GIF-файлу. Однак не рекомендований підхід.

Я б використав paddingатрибут. Це дозволить вам додати встановлену кількість пікселів по обидві сторони елемента, не втрачаючи при цьому своїх якостей прольоту:

• Це не стане блоком
• Він буде плавати, як ви очікуєте

Однак цей метод лише додасть до заповнення, тому, якщо ви зміните довжину вмісту (наприклад, із Категорій на Теги), розмір вмісту зміниться, а загальний розмір елемента також зміниться. Але якщо ви дійсно хочете встановити жорсткий розмір, вам слід зробити, як зазначено вище, і використати div.

Дивіться модель коробки, щоб отримати докладнішу інформацію про модель коробки, вміст, відступ, поля тощо.

Як і в інших відповідях, почніть атрибути span з цього:

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

переповнення: авто;