Obecný kontejner
<span>
Inline kontejner. Označí kousek textu uvnitř věty, abychom ho mohli nastylovat.
V náhledu vidíte, kam se dostaneme. Skrolujte dolů a postavíme to krok za krokem.
Zápis
Kousek textu
span je párový tag, kterým obalíme část textu. Stejně jako div nic neznamená a sám nijak nevypadá.
V náhledu zatím nic nepoznáte. Třídu price použijeme za chvíli ve stylu.
Inline kontejner
Zůstává ve větě
Rozdíl oproti div: span nezačíná na novém řádku a je jen tak široký jako jeho text. V náhledu jsme oba spany v odstavci obtáhli čárkovaně.
Kdy
Nejdřív hledat význam
Když má kousek textu význam, má i vlastní element. Datum je time, důležitý text strong, kód code. span je až pro ozdobu bez významu.
time nese v atributu datetime datum ve tvaru, kterému rozumí i počítač, třeba kalendář nebo vyhledávač.
Styl
Zvýrazněná cena
Cena nemá zvláštní element, ale chceme, aby byla na první pohled vidět. Přesně na tohle je span s třídou.
Styl
Štítek u nadpisu
Malý štítek „Nové“ je další typický span. Aby mu fungoval padding do všech stran, přepneme ho na inline-block: zůstane v řádku, ale chová se jako krabička.
Čistě inline elementu nefunguje width, height ani svislý margin. inline-block to spraví.
Responzivita
Cena v kuse
Na úzkém displeji se řádky lámou jinde než na desktopu. Mohlo by se stát, že „1 290“ zůstane na konci řádku a „Kč“ spadne na další. white-space: nowrap drží obsah spanu pohromadě.
Hodí se i pro telefonní čísla, data nebo jména značek. Jen to nepřehánějte: dlouhý nezlomitelný text by na telefonu přetekl.
Shrnutí
Jak používat span
Ano
- kousek textu, který chceme jen nastylovat
- třída podle obsahu:
price,badge inline-block, když potřebuje okraje a rozměrywhite-space: nowrappro ceny a čísla
Ne
spanmístostrong,em,timenebocodespankolem celých odstavců a bloků