Skip to 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.

snimak ekrana sa primerom pozicioniranih inline elemenata

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.

snimak ekrana sa html kodom inline elemenata

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>

snimak ekrana sa html kodom blok elemenata

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

snimak ekrana sa pozicioniranim blok elementima

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.

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

Od 2017. godine. sarađujemo sa Digitizerom. Izuzetno precizna i profesionalna saradnja. Vidmo rezultate, a s obzirom na industriju u koju smo uključeni, puno toga zavisi od marketinga koji Digitizer radi. Rezultati se najbolje vide u količini ljudi koja se javi na intervju. Svaki put kada bih nešto sugerisao, Digitizer tim obavezno uvede izmene u prezentaciju. Naravno da ih preporučujem. Vec su preporučeni.

Filip Slijepcevic
Poente Tehcnical
Rating: 10

Od 2020. godine sarađujemo sa Digitizerom. Saradnja je divna i komunikacija opuštena: zahtev dočekaju za razumevanjem i ispunjavaju ekstremno brzo. Kao merljive rezultate vidimo povećan obim posla. Apsolutno i uvek imam slobodu da ovom timu sugerišem svoje mišljenje. Stalno ih preporučujem.

Lenka Jakimovska
Chicago Waffles
Rating: 10

DermaVille ordinacija sarađuje sa Digitizerom od 2023. godine i mislim da su veoma profesionalni. Sve pohvale. Od konkretnih rezultata vidimo više poseta ka našem sajtu. Da, rado preporučujemo Digitizer!

Danijela Ljubojevic
DermaVille
Rating: 10

Sa Digitizerom radimo od 2019. godine, dakle više od 5 godina. Izuzetno sam zadovoljan brzinom kojom se odgovara mojim nalozima poslatim Digitizer timu. Konkretan rezultat saradnje sa Digitizerom je da mi je web stranica uvek sređena i blagovremeno ažurirana. Sloboda sugerisanja rešenja i razmena mišljenja je od samog početka važila u mom odnosu sa Digitizerom i to je osnova naše saradnje koja postoji i danas posle 5 godina saradnje. Apsolutno bih preporučio drugim kompanijama usluge Digitizera, i to i činim uvek kada mi se ukaže prilika.

Dino Jusufovic
Jusufović & Partners
Rating: 10

S kompanijom Digitizer saradjujemo duže od 5 godina. Saradnja je vrlo pozitivna i produktivna, dobro organizovana i dovodi do postizanja uspeha. U našoj saradnji s Digitizerom vidimo konkretni napredak, posebno u povećanju broja pratilaca na društvenim mrežama, kvalitetnim objavama i korisnim sugestijama za bolju vidljivost naše kompanije. Imamo slobodu da izrazimo svoje mišljenje i sugestije, a Digitizer tim to veoma poštuje i uzima u obzir. Otvoreni su za preporuke i zajedničkim snagama radimo na unapredjenju saradnje. Vrlo rado preporučujemo kompaniju Digitizer. Digitizer tim je divan, saradljiv i uvek odgovori na sve naše zahteve u što kraćem roku.

Marijana Kuzmanovic
Sineks Medical
Rating: 10

Sa Digitizerom sarađujemo od, mislim, samog osnivanja firme Digitizer 2014. god. Divna, dugogodišnja saradnja u kojoj nam tim Digitizera uvek izlazi u susret da ispuni sve naše zahteve u rekordnom roku. Divne ideje i veoma ljubazni saradnici. Sarađujući s Digitizerom uspeli smo da naš sajt podignemo na viši nivo, na društvenim mrežama veči broj ljudi koji nas prati i veći broj klijenata u našim maloprodajnim objektima. Osećam slobodu da Digitizeru sugerišem svoje mišljenje oko saradnje i oni to uvažavaju. Digitizer je kompanija koju preporučujem svima koji žele ozbiljne saradnike. Predivan kreativan tim koji osluškuje vaše potrebe i želje i pretvori ih u stvarnost.

Mira Suhanski
Parfimerija Diva
Rating: 10

Sa Digitizerom sarađujemo od 2021. godine i pokazali su kao tim da su jako odgovorni, pouzdani i stručni. Pružili su nam profesionalan odnos od starta saradnje sve do danas. Rezultati su konkretni i merljivi. Preporučujem!

Slobodan Stamenkovic
Info Point
Rating: 10

Egrokorr trade i Digitizer sarađuju malo više od 5 god. Naše iskustvo je u jednoj reči: ODLICNO! Konkretne rezultate koje vidimo su mnogo veca posećenost sajta, samim tim i puno novih klijenata. Odavno ih preporučujem i nastaviću!

Marija Perovic
Egrokorr Trade
Rating: 10

Sarađujemo sa kompanijom Digitizer od 2015. godine. Prepoznali smo da su dostupni, ljubazni, spremni za saradnju. Konkretno smo najzadovoljniji sa uslugom Google ads – povećan nam broj poziva direktno sa website-a. Saradnja je korektna i jako smo zadovoljni. Preporučila bih i već preporučujem Digitizer svim kompanijama kojima trebaju njihove usluge.

Bojana Kralj
Message Advertising
Rating: 10

Sa Digitizerom sarađujemo od 2018. godine, od našeg osnivanja. Smatram dosadašnju saradnju savršenom, sa izuzetnim rezultatima. Digitizer rado i uvek preporučujem svim kompanijama.

Igor Vidovic
AirSoft Polygon
Rating: 10

Digitizer i Bianconerri oduvek sarađuju. Fenomalna komunikacija i saradnja, a vidimo rezutlate kao što bolje nalaženje i bolji pregled naše web stranice. Vrlo rado preporučujem usluge Digitizera svima.

Sanja Topic
Bianconeri - Sanja Topic
Rating: 10

Sarađujemo odlično duže od godinu dana i rezultat je povećanje klijenata. Rado preporučujem Digitizer kompanijama.

Olivera Radivojevic
Olja Beauty
Rating: 10

ompanija: Iskra sarađuje sa kompanijom Digitizer oko 3 godine. Naše dosadašnje iskustvo je besprekorno, preko svih očekivanja!!! Rezultati su više nego vidljivi. Apsolutno se dogovaramo oko svega, to je jedini način da se postignu vrhunski rezultati. Naravno, uvek ih preporučujemo.

Miljan Rajovic
Ordinacija Iskra M
Rating: 10

Sarađujemo od 2018. godine i koristimo njihovo znanje i iskustvo i uspeli smo da povećamo i vidljivost na mrežama i online prodaju. Uglavnom me razumeju. Uvek su dobra preporuka.

Jelena Simonovic
Baby Plaza
Rating: 10

Sign Up Now.

Follow.

Chat.

Contact Form.

    ime i Prezime*
    Email*
    Da li želite da ostavite broj mobilnog telefona?*
    Broj mobilnog telefona
    Kompanija/Organizacija*
    Website
    Šta je potrebno Vašoj kompaniji/organizaciji?
    Da li znate koje rezultate želite da postignete?*
    Koje rezultate želite da postignete?


      ime i Prezime*
      Email*
      Da li želite da ostavite broj mobilnog telefona?*
      Broj mobilnog telefona
      Kompanija/Organizacija*
      Website
      Kog datuma želite da zakažete sastanak?
      U koje vreme?


        ime i Prezime*
        Email*
        Da li želite da ostavite broj mobilnog telefona?*
        Broj mobilnog telefona
        Kompanija/Organizacija*
        Website
        Da li znate koje rezultate želite da postignete?*
        Koje rezultate želite da postignete?


        Mobile & Mail.

        Linkovi.