Postoje dvije vrste elemenata u HTML-u - blok elementi i inline elementi. U nastavku ćete naučiti karakteristike ovih elemenata i razlike između njih, kao i načine da ih kontrolirate putem CSS pravila.
Block Elements
Blok elementi su osnova koja se koristi za raspored web stranica. Ovaj element je pravougaonik koji po defaultu zauzima cijelu dostupnu širinu stranice (osim ako nije drugačije navedeno u CSS-u), a dužina elementa ovisi o njegovom sadržaju. Ovaj element uvijek počinje sa nova linija, odnosno nalazi se ispod prethodnog elementa. Blok element može sadržavati druge blok elemente i inline elementi.
Primjeri blok elemenata:
,
- ,
- ,
itd.
Inline elementi
Za razliku od blok elementa, inline element se ne prelama u novi red, već se postavlja na istu liniju kao i prethodni element. Takvi elementi se obično nalaze unutar blok elemenata i njihova širina zavisi samo od sadržaja i CSS postavke. Druga razlika između inline elementa i blok elementa je u tome što on može sadržavati samo sadržaj i druge inline elemente. Blok elementi ne mogu biti ugniježđeni unutar inline elemenata.
Primjeri inline elemenata: , , , , itd.
Bilješka: U HTML5, redosled kojim su oznake ugniježđene ne igra takvu ulogu. Elementi se više ne dijele jednostavno na blokove i inline, već su grupirani prema značenju i namjeni, predstavljajući kategorije sadržaja.
CSS svojstvo prikaza: promjena tipa elementa
Uz pomoć izuzetno korisno svojstvo display u CSS-u može učiniti da se blok element pojavi kao inline element i obrnuto. Da bi se blok element ponašao kao inline element (tj. da ne bi bio preveden u novi red), morate napisati pravilo za njega:
Prikaz: inline;
Ako želite prikazati inline element kao blok element (tako da postoji prijelom reda prije i poslije elementa), napišite sljedeće:
Displej: blok;
Akcija (display:inline) i (display:block)
Također možete napraviti "hibrid" - blok element s ponašanjem poput elementa malim slovima. U ovom slučaju, sav sadržaj takvih blok elemenata će biti prikazan kao i obično, ali će se blokovi ponašati kao inline elementi, poređajući se u jednom redu jedan za drugim i prelamajući u novi red samo kada je to potrebno. Kolapsirajuća margina u takvim slučajevima prestaje da funkcioniše. Da pretvorite element u blok-inline element, napišite:
Prikaz: inline-block;
Akcija (prikaz: inline-blok)
Dalje u tutorijalu: CSS border property. Naučit ćete kako dodati ivice elementima web stranice i koja prilagođavanja možete primijeniti na njih koristeći kaskadne tablice stilova.
HTML elementi se dijele na inline i blok elemente na osnovu načina na koji se prikazuju na web stranici.
Inline elementi (inline)
Umetnuti elementi su dizajnirani da izvode neke radnje na tekstu, na primjer: prekidanje linije, isticanje fragmenta teksta kurzivom, logično isticanje nekog teksta i primjena stilova na njega pomoću koristeći CSS itd. Ovisno o namjeni inline elementa, dio teksta se stavlja između početne i završne oznake ili se oznaka koristi bilo gdje u tekstu, na primjer, za prekid reda.
Na primjer:
Možete koristiti inline element kako bi podebljanim stilom istaknuli tekst koji privlači pažnju posjetitelja stranice.
Inline element ima širinu koja je jednaka širini njegovog sadržaja. Inline elementi ne mogu sadržavati blok elemente unutar sebe.
Primjeri inline elemenata: , ,