Priručnik CSS - Lekcija 4 - Svojstvo display. Razlika između div i span.
U prethodnim lekcijama smo povezali css preko fajla i napisali malo css koda da vidimo kako to funkcioniše. U ovoj lekciji ćemo se upoznati sa jednim važnim svojstvom display. Svojstvo display određuje kako se prikazuje tag u HTML dokumentu, da li će biti prikazan kao tekst u liniji ili kao blok koji ima svoju visinu i širinu. Dakle, počnimo sa najosnovnijim, kako se tagovi prikazuju po default-u, a oni se razlikuju: <div> se prikazuje kao blok, a <span> kao tekst u liniji. Hajde da počnemo sa prikazom teksta. Napravićemo test liniju i obmotati je u span.
display: inline
Tag span se prikazuje u liniji kako i treba da se prikaže tekst (naravno osim japanskih hijeroglifa u stubcu). Tag span nema ni visinu ni širinu, ne može se zadati tagu sa display: inline ova svojstva, jer se tekst meri drugim karakteristikama: veličina fonta, font, boja, razmak između slova, redova, reči, margine od početka reda. Zato ako želite da tagu date dimenzije visine ili širine ili margine, treba da koristite sledeću vrednost svojstva display.
display: block
Vrednost block se koristi po default-u za tag div, ova vrednost omogućava da se zadaju širina, visina i margine bloku. Tako možemo definisati oblast na sajtu u koju možemo ubacivati tekst, sliku ili još jedan blok. Možemo čak zadati display: block tagu span, pri tome će taj tag (bolje je u tom slučaju koristiti neki span sa klasom npr. <span class="block">text</span>) dobiti širinu i visinu i ponašaće se kao blok.
Još jedna osobina vrednosti block je da se blok razvuče na celu moguću širinu, odnosno podrazumevana širina je 100%. Ali ne može se zadati height: 100%, tj. visina 100%. Blok zauzima onoliko mesta visinski koliko mu treba, ostalo može biti zadato u pikselima, npr. 800px, ali ne može se rastegnuti na celu visinu ekrana. Kako to ostvariti nastavićemo da pričamo u narednim člancima.
display: inline-block
Postoje situacije kada želimo da slike budu prikazane kao blokovi, tj. da imaju širinu, visinu i margine, ali da ne zauzimaju punu širinu već da idu jedna za drugom. Za to se koristi inline-block. Ova vrednost kombinuje prikaz teksta i bloka. Display-block se može zadati i običnim blokovima.
display: table
Vrednost table se koristi po default-u za tabele. Za razliku od blokova, tabelu možemo razvući po visini na 100%, ali mi ćemo i dalje koristiti blokovsku štampu umesto tabelarne, jer tabele treba koristiti samo za tabelarne podatke, a ne za štampu.
display: list-item
Kada se koristi vrednost list-item (po default-u je to za tag <li>) dodaje se marker (po default-u crna tačka).
display: none
Ako se ovoj klasi, tagu ili id-u dodeli ova vrednost, on... prestaje da se prikazuje na sajtu! Budite pažljivi sa ovim, jer možete ukloniti nešto bitno i teško ćete kasnije razumeti zašto nema elementa na sajtu. Ali kada klijent traži da nešto uklonite sa sajta (npr. RSS ikonu), možete to učiniti ovako:
.rss{
display: none;
}
Naravno, pravilnije je ukloniti element iz šablona da se i ne prikazuje. Ali ako se već prikazuje, možete ga lako ukloniti preko css-a.