Szerokość CSS tagu <span>

Używam <span>tagów w tytułach moich modułów, np

<span>Categories</span>.

Określam kolor / obraz tła przęsła, szerokość i wysokość w css.

Ale szerokość przęsła zależy od jego zawartości / tekstu.

Więc jeśli to zrobię <span></span>, tylko z obrazem / kolorem tła w css, nic się nie pojawi.

Oczywiście chcę, żeby coś się pojawiło.

Jak mogę to rozwiązać?

Możesz jawnie ustawić właściwość display na „block”, aby zachowywała się jak element na poziomie bloku, ale w takim przypadku prawdopodobnie powinieneś po prostu użyć zamiast tego elementu div.

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

spans jest domyślnie stylem wbudowanym, którego szerokości nie można określić.

display: inline-block;

byłby to dobry sposób, chyba że IE go nie obsługuje

możesz jednak zhakować rozwiązanie obsługujące wiele przeglądarek

Nie można określić szerokości elementu z wbudowanym wyświetlaczem. Możesz umieścić w nim coś, na przykład nierozdzielającą spację (), a następnie ustawić dopełnienie, aby nadać mu większą szerokość, ale nie możesz tego bezpośrednio kontrolować.

Możesz użyć display inline-block, ale nie jest to szeroko obsługiwane.

Prawdziwym hackem byłoby umieszczenie obrazu w środku, a następnie ustawienie jego szerokości. Coś w rodzaju przezroczystego 1 piksela GIF. Nie jest to jednak zalecane podejście.

Użyłbym paddingatrybutu. Umożliwi to dodanie określonej liczby pikseli po obu stronach elementu bez utraty właściwości rozpiętości elementu:

• Nie stanie się blokiem
• Będzie unosić się zgodnie z oczekiwaniami

Ta metoda spowoduje jednak tylko dodanie dopełnienia, więc jeśli zmienisz długość treści (na przykład z kategorii na tagi), rozmiar treści się zmieni, a także zmieni się ogólny rozmiar elementu. Ale jeśli naprawdę chcesz ustawić sztywny rozmiar, powinieneś zrobić jak wspomniano powyżej i użyć div.

Zobacz model pudełka, aby uzyskać więcej informacji na temat modelu pudełka, zawartości, dopełnienia, marginesów itp.

Podobnie jak w innych odpowiedziach, zacznij atrybuty zakresu od tego:

display:inline-block;  

Teraz możesz użyć dopełnienia większego niż szerokość:

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

Kiedy używasz dopełnienia, twój kolor rozszerza się w obie strony (prawą i lewą), a nie tylko w prawo (jak w przypadku szerokości).

Użyj atrybutu „display”, jak w przykładzie:

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

Po ustaleniu wysokości i szerokości powinieneś powiedzieć, jak zachować się, jeśli tekst w środku wykroczy poza swój obszar. Więc dodaj css

przepełnienie: auto;