Razlike između elemenata na razini bloka i ugrađenih elemenata

HTML sastoji se od različitih elemenata koji djeluju kao gradivni blok web stranica. Svaki od ovih elemenata spada u jednu od dvije kategorije: elementi na razini bloka ili ugrađeni element. Razumijevanje razlike između ove dvije vrste elemenata važan je korak u izradi web stranica.

Elementi na razini bloka

Pa, što je element na razini bloka? Element na razini bloka je HTML element koji započinje novi redak na web stranici i proteže se u punoj širini dostupnog vodoravnog prostora svog nadređenog elementa. Stvara velike blokove sadržaja poput odlomaka ili odjeljaka stranica. U stvari, većina HTML elemenata su elementi na razini bloka.

Elementi na razini bloka koriste se u tijelu HTML dokumenta. Mogu sadržavati ugrađene elemente, kao i druge elemente na razini bloka.

Ugrađeni elementi

Za razliku od elementa na razini bloka, ugrađeni element:

Može započeti unutar crte.
Ne započinje novi redak.
Njegova se širina proteže samo onoliko koliko je definirana njezinim oznakama.

Primjer umetnutog elementa je

instagram viewer

, što čini font sadržaja teksta sadržan podebljanim slovima. Umetnuti element obično sadrži samo ostale umetnute elemente ili uopće ne može sadržavati ništa, poput
break tag.

U HTML-u postoji i treća vrsta elemenata: oni koji se uopće ne prikazuju. Ovi elementi pružaju informacije o stranici, ali se ne prikazuju kada se generiraju u web pregledniku.

Na primjer:

definira meta podatke.
je element HTML dokumenta koji sadrži te elemente.

Prebacivanje vrsta vrsta i blokova elemenata

Tip elementa možete promijeniti iz umetnutog u blokirani, ili obrnuto, koristeći jedno od ovih CSS svojstava:

```
prikaz: blok; 
```
```
prikaz: inline; 
```
```
zaslon: nema;
```

The CSS svojstvo display omogućuje vam promjenu ugrađenog svojstva u blokirano ili bloka u ugrađeno ili ne za prikaz uopće.

Kada promijeniti svojstvo prikaza

Općenito, ostavite svojstvo prikaza na miru, ali postoje neki slučajevi kada zamjena svojstava prikaza u retku i bloka može biti korisna.

Izbornici vodoravnog popisa: Popisi su elementi na razini bloka, ali ako želite da se vaš izbornik prikazuje vodoravno, popis morate pretvoriti u ugrađeni element tako da svaka stavka izbornika ne započinje u novom retku.
Zaglavlja u tekstu: Ponekad ćete možda htjeti da zaglavlje ostane u tekstu, ali zadržite vrijednosti HTML zaglavlja. Promjena vrijednosti h1 do h6 u inline omogućit će da tekst koji dolazi nakon završne oznake nastavi teći pored njega u istom retku, umjesto da započne u novom retku.
Uklanjanje elementa: Ako želite u potpunosti ukloniti element iz dokumenta normalan protok, možete postaviti zaslon na
```
nijedna
```
Jedna napomena, budite oprezni kada koristite zaslon: nema. Iako će taj stil doista element učiniti nevidljivim, vi to nikada ne želite koristiti za skrivanje teksta koji ste dodali iz SEO razloga, ali ne želite prikazivati posjetiteljima. To je siguran način da vaša web lokacija bude kažnjena zbog pristupa crnom šeširu SEO-u.

Uobičajene pogreške u oblikovanju ugrađenih elemenata

Jedna od najčešćih pogrešaka novopridošlih u web dizajnu je pokušaj postavljanja širine na ugrađenom elementu. To ne radi jer širina umetnutih elemenata nije definirana okvirom spremnika.

Inline elementi zanemaruju nekoliko svojstava:

```
širina
```
i
```
visina
```
```
maksimalna širina
```
i
```
max-visina
```
```
min-širina
```
i
```
min-visina
```

Microsoft Internet Explorer (zamijenjen Microsoft Edgeom) u prošlosti je pogrešno primjenjivao neka od tih svojstava čak i na umetnute okvire. Ovo nije u skladu sa standardima. To možda nije slučaj s novijim verzijama Microsoftovog web preglednika.

Ako trebate definirati širinu ili visinu koju bi element trebao zauzeti, to ćete htjeti primijeniti na element na razini bloka koji sadrži vaš umetnuti tekst.