Blok i inline HTML elementi
Sada ćemo naučiti da postoje dva glavna načina prikazivanja elemenata. To su blok i inline elementi.
Blokovi odvajaju delove dokumenta. Uobičajeno se ređaju jedan ispod drugog i imaju maksimalnu moguću širinu koju im dozvoljava kontejnerski element. Primeri ovih elemenata su naslovi i pasusi.
Inline elementi "teku sa tekstom". Nemaju širinu, već zavise od teksta koji obuhvataju - tako mogu biti prikazani i u više linija. Primeri su naglašen ili specifičan tekst.
Uobičajeno su blokovi uvek nadređeni inline elementima, ali to nije pravilo.
Posebni slučajevi
Postoje i elementi koji se ne mogu svrstati ni u jednu od ove dve kategorije, ili bolje da kažemo - imaju karakteristike oba tipa prikaza. Takvi elementi su inline-blokovi.
Inline-blokovi takođe "teku sa tekstom", odnosno, ne ređaju se jedni ispod drugih, već jedan pored drugog. Međutim, oni imaju definisanu širinu i ne mogu se prelomiti u više redova. Zamislite inline-blok kao jedno veliko slovo unutar teksta. Najbolji primer ovakvog elementa je slika.
Naravno ima još specifičnih slučajeva (npr. tabele i ćelije unutar njih), ali ćemo o njima pričati kada dođe vreme.
Pogledajte sada primere ovih tipova elemenata.
Blok i inline tip prikaza
Pogledajmo prvo primer blokova.U primeru imamo naslov, zatim pasus i par generičkih blokova.
<h1 style="background-color:#feb;">Naslov</h1>
<p style="background-color:#cff;">Pasus sa tekstom</p>
<div style="background-color:#fcf;">Treći blok</div>
<div style="background-color:#dfd;">
Četvrti blok - ovde ćemo dodati malo više teksta da bismo videli kako to izgleda.
Tekst unutar blokova se naravno može prelamati u više redova.
</div>
<div style="background-color:#ddf;">Peti blok</div>
Ovde smo obojili pozadinu kako biste videli da ovi elementi imaju maksimalnu širinu koju mogu, i da se ređaju jedni ispod drugih. Ne zaboravite, širina je maksimalna samo ako se putem CSS pravila ne zada drugačije. Ako vas čude beli razmaci među blokovima - to su margine koje su podrazumevane za naslove i pasuse. Naravno, sve se to može kontrolisati pomoću CSS-a.
Pogledajmo sada kako izgledaju inline elementi, i to naglašen i specifičan tekst.
<div>
Ovde će takođe biti <i style="background-color:#feb;">malo više teksta</i> da bismo
videli ponašanje inline elemenata.
<b style="background-color:#cff;">Ovi elementi se mogu prelamati u više redova</b>.
Zato im je nemoguće odrediti širinu.
</div>
I ovde smo obojili elemente kako bi bilo lakše da ih primetite.
Evo sada nečega posebnog. Inline blokovi
<div>
Ovde će takođe biti malo više teksta da bismo videli ponašanje inline elemenata.
<div style="display:inline-block; background-color:#cfd;">
Ovi elementi se ne mogu prelamati<br />u više redova, ali tekst unutar njih može!
</div>
Ponašaju se kao jedno
<div style="display:inline-block; background-color:#fcd;">
veliko<br />slovo
</div>
unutar teksta, a moguće im je podesiti tačno određenu širinu.
</div>
Obratite pažnju - DIV element inače nema ovakvo ponašanje, ali smo ovde promenili njegov izgled. Ako vas zanima kako se menja tip prikaza elementa, u delu sajta koji se bavi CSS-om, potražite atribut display. Takođe smo obojili element, kako bismo bolje videli šta se dešava.