Koja je razlika između block i inline-block?

Block, inline-block i inline vas mogu zbuniti pri upotrebi CSS-a i HTML-a.
Ovjde ćemo navesti primjere od ovih atributa u svrsi da ih bolje razumijete i naučite kako funkcioniraju.

CSS display: inline

U prvom primjeru započinjemo s oznakom <span>, koja je prema zadanim postavkama inline element.
U primjeru u nastavku tekst je crvene boje koji zahtijeva atribut style u oznaci <span>.
Ova metoda je metoda korištenja CSS-a za pretvaranje nekih riječi ili rečenica u crvenu boju.

<span style="color: red;">tekst spana</span>

CSS display: block

U sljedećem smo primjeru promijenili zadanu oznaku <span> koja se prikazuje kao block.

Budući da block element zauzima vlastitu liniju, on daje izgled da je u našem primjeru pritisnut enter ili return.

Pročitaj:   Kako onemogućiti uređaj u Device Manager-u?

Drugim riječima, element block će otvoriti novi redak za sebe.

HTML kôd:

<span style="color: red; display: block;">tekst spana</span>

CSS display: inline-block

Napokon, u sljedećem primjeru promijenili smo zadanu oznaku <span> koja se prikazuje kao inline-block.
Za razliku od block elementa, inline-block je u skladu sa svim tekstom oko elementa i isti je kao i inline.

<span style="color: red; display: inline-block;">tekst spana</span>

Zašto bih koristio inline-block umjesto inline?

Nakon čitanja gornjeg primjera, odmah se možete zapitati zašto bih trebao koristiti block ili inline-block?
Ako element napravite blok, odnosno inline-block, možete odabrati da element ima vertikalnu visinu, kao što je prikazano dolje.

Inline span s visinom

Ovdje se visina, odnosno height neće primijeniti.

<span style="color: red; background-color: yellow; height: 50px;">tekst spana</span>

Inline-block s visinom

Ovdje će se visina, odnosno height primijeniti.

<span style="color: red; background-color: yellow; display: inline-block; height: 50px;">tekst spana</span>

By Lapan

ML Lapan je računalni geek, wordpress freelancer i gamer iz Bosne i Hercegovine. Ima 15 godina iskustva u radu na računaru, internetu, web lokacijama (najviše s Wordpress web stranicama). Po zanimanju je ekonomski tehničar, iako se trenutno ne bavi ovom vrstom posla. Na ovom blogu objavljuje gameplay snimke nekih igara koje voli igrati, te neke druge interesantne članke.

Komentariši

Vaša email adresa neće biti objavljivana. Neophodna polja su označena sa *

Svi Smo Bliski

Problem, pitanje, hitan slučaj?
Ne oklijevajte posjetiti centar za pomoć, Mi vam možemo pomoći.

Lapan
Naše web mjesto je omogućeno prikazivanjem internetskih oglasa našim posjetiteljima.
Onemogućite vaš blokator i kliknite na ovaj tekst.