skip to Main Content

U HTML–u blok i inline elementi su gradivni blokovi veb stranica od kojih svaki gradivni blok ima podrazumevanu vrednost prikaza. U tekstu smo prikazali koje su osnovne karakteristike koje poseduju blok i inline elementi.

 

Blok i inline elementi

Blok elementi pojavljuju se samo unutar elementa <body> i koriste predviđeni HTML tag kao oznaku za definisanje odeljka, na primer <div> ili <p>.  Počinju u novim redovima, zauzimaju celu širinu stranice i mogu sadržati ugrađene elemente ili ponekad drugi nivo bloka elementi.

Inline element je prezentaciona karakteristika koja koristi predviđeni HTML tag kao HTML oznaku za definisanje odeljka, na primer <span> ili <i>.  Ne počinju u novoj liniji, zauzimaju samo prostor ograničen oznakama koje definišu element i mogu sadržati samo druge ugrađene elemente.

Sada, imajte na umu, iako je razumevanje blok i inline elemenata i dalje relevantno, razlike između blokova i inline elemenata su potrošene kroz HTML 4.01. Ove dve kategorije su u međuvremenu zamenjene različitim skupom kategorija sadržaja.

 

U čemu se razlikuju blok i inline elementi?

Poznavanje razlike između inline elemenata i elemenata bloka će vam neizmerno pomoći u vašem CSS-u i stilu. Budući da se svaki od ovih elemenata ponaša na poseban način, biće lakše naterati ih da rade ono što želite da rade ako dobro razumete njihov način funkcionisanja.

Ako ne razumete različita pravila koja se primenjuju na inline elemente u odnosu na blok elemente, HTML i CSS mogu biti neverovatno frustrirajući. Na primer, blok elementi mogu sadržati i druge elemente nivoa bloka, kao i inline elemente. Međutim, inline elementi mogu sadržati samo inline elemente.

Što bi značilo da u <div> element možemo ubaciti bilo koji element, nebitno da li je blok ili inline dok, u inline element recimo <span> možemo ubaciti samo inline elemente npr. <a>, <i> itd.

 

Koja je razlika između ugrađenih i blokovnih elemenata?

Prilikom ispitivanja ugrađenih elemenata u odnosu na blok, primetićete da su ugrađeni elementi obično zasnovani na tekstu, a elementi nivoa bloka obično strukturni.

 

Inline elementi

Inline  elementi ne počinju sa novim redom, što znači da se ređaju jedan pored drugog na istoj liniji ako za njih ima dovoljno mesta, jer na njih ne možemo da primenimo CSS pravilo gornje i donje margine, kao ni da im dajemo širinu ili visinu. Ali, oni i dalje mogu biti stilizovani sa levim/desnim marginama, kao i sa pedinzima.

  • Zauzimaju samo prostor ograničen oznakama koje definišu element.
  • Ne počinje na novoj liniji.
  • Zauzimaju onoliko širine koliko je potrebno.
  • Ne prekidaju tok sadržaja.
  • Mogu sadržati samo podatke.
  • Mogu sadržati druge inline
  • Navodi ih CSS u rasporedu toka.

 

Neki uobičajeni inline elementi su:

<a> <button> <cite><code> <data> <em> <i> <select> <span> <vreme> <video>

 

Slika ispod prikazuje ponašanje inline elemenata. Svi imaju primenjenu žutu ivicu, tako da možete videti širinu elemenata.

Šta su blok i inline elementi u HTML-u i CSS-u?

Kao što možemo da vidimo na gornjoj slici u editor smo napravili par inline elemenata tačnije <span> tagova u koje smo stavili brojeve. Da bi se lepše uvidelo ponašanje inline elemenata svakom smo dali 100% širinu i odredjenu visinu.

Šta su blok i inline elementi u HTML-u i CSS-u?

Kako smo i pričali u prethodnom delu bloga inline elementi ignorišu zadatu širinu i visinu i zauzimaju širinu koliku smatraju da treba i ređaju se jedni pored drugih. Ovo nam daje naznaku da moramo da pazimo na pravila pisanja ovih elemenata da bismo što lakše pisali CSS.

 

Blok elementi

Podrazumevano element na nivou bloka zauzima čitavu širinu nadređenog kontejnera. Kada dođe do ivice kontejnera, spustiće se ispod ostalih elemenata. Dakle, čak i ako imate samo jedan pasus u <body>, on će i dalje zauzimati celu širinu pregledača. Odnosno, osim ako niste postavili širinu tela. To takođe znači da ako imate kratke rečenice u odvojenim oznakama pasusa, svaki pasus započinje u novom redu.

  • Pojavljuju se samo u okviru elementa <body>.
  • Počinju u novom redu.
  • Zauzimaju celu širinu stranice
  • Imajte prelom linije pre i posle elementa.
  • Takođe može sadržati inline
  • Ponekad može sadržati i druge blok elemente.

 

Neki od najčešćih bloka elemenata  su:

<adresa> <article> <div> <h1> <header> <li> <main> <nav> <ol> <p> <table> <ul>

Šta su blok i inline elementi u HTML-u i CSS-u?

Na dole postavljenoj slici možemo da vidimo 4 blok elementa u vidu pasusa.

Šta su blok i inline elementi u HTML-u i CSS-u?

Možemo da zaključimo da se blok elementi ponašaju totalnu suprotno inline elementima, što znači da zauzimaju punu širinu stranice, počinju u novom redu i prihvataju CSS pravila kao što su širina, visina, margine i pedinzi.

 

Za još vesti i interesantnih priča iz digitalnog marketinga posetite našu blog stranu ili zapratite naš Instagram profil.

Šta su blok i inline elementi u HTML-u i CSS-u?

Made by Miloš Stojanović – Senior Web Developer @Digitizer