Blok, inline-blok i inline mogu vas zbuniti kada koristite CSS i HTML.
Ovdje ćemo dati primjere ovih atributa kako biste ih bolje razumjeli i naučili kako funkcioniraju.
CSS prikaz: inline
U prvom primjeru počinjemo s oznakom <span> , koja je prema zadanim postavkama inline element.
U donjem primjeru tekst je crvene boje koji zahtijeva atribut stila u oznaci <span> .
Ovo je metoda korištenja CSS-a za pretvaranje nekih riječi ili rečenica u crveno.
<span style="color: red;">Tekst spana.</span>CSS prikaz: blok
U sljedećem primjeru promijenili smo zadanu oznaku <span> koja se prikazuje kao blok.
Budući da element bloka zauzima vlastitu liniju, daje izgled da je u našem primjeru pritisnut enter ili return.
Drugim riječima, element bloka će sam sebi otvoriti novi red.
HTML kod:
<span style="color: red; display: block;">Tekst spana.</span>CSS prikaz: inline-block
Konačno, u sljedećem primjeru promijenili smo zadanu oznaku <span> koja se prikazuje kao inline-block.
Za razliku od blok elementa, inline-block je konzistentan sa svim tekstom oko elementa i isti je kao inline.
<span style="color: red; display: inline-block;">Tekst spana.</span>Zašto bih koristio inline-block umjesto inline?
Nakon što pročitate gornji primjer, možete se odmah zapitati zašto biste trebali koristiti block ili inline-block?
Ako kreirate inline-block, možete izabrati da element ima vertikalnu visinu, kao što je prikazano u nastavku.
Inline s visinom
Ovdje se visina neće primjenjivati.
<span style="color: red; background-color: yellow; height: 50px;">Tekst span.</span>Inline-block s visinom
Ovdje će se primijeniti visina.
<span style="color: red; background-color: yellow; display: inline-block; height: 50px;">Tekst spana.</span>