A HTML egyes tagjai inline tag-ek, ami azt jelenti, hogy nincsen előre megadott szélességük és magasságuk. Ilyen például a <span>, <br>, <i>, <p>, <a> tagek, stb.
Vannak olyan tag-ek, amelyeknek van magassága és szélessége, mivel alapesetben ezek a weboldalon egy téglalap alakú területet foglalnak el. Ezek a blokk szintű (block-level) tagek. A blokk szintű tag-ek alapértelmezetten a weboldalon egymás alatt helyezkednek el. Ilyen tagek például <form>, <header>, <footer>, <h1>..<h6>, <table>, <video>, <audio> és nem utolsósorban a <div> tag.
A blokk-szintű tag-eket lehet csak pozicionálni!
Ezt a viselkedést lehet szabályozni a display: CSS beállítással. A szintaktikája:
display: tulajdonság
A tulajdonságok az alábbiak lehetnek:
- none - nem jelenik meg az elem, vagyis nem foglal helyet a képernyőn, illetve eltűnik (erre használható a visibility: hidden parancs is.)
- inline - a megadott tag soron belüli tag-gé válik, mint például a <span> alapértelmezésként.
- block - a megadott tag blokk szintű elemmé válik, vagyis az ilyen tag-ek egymás alá kerülnek és lesz szélességük, magasságuk
- inline-block - az elem maga inline lesz, de megadhatok neki szélességet és magasságot is.
- grid - Egy táblázatot hoz létre az elemből, blokk szintű elemként.
- flex - blokk szintű flex konténert hoz létre. A flex konténerek segítségével lehet olyan szerkezetet létrehozni, amely a képernyő szélességétől függően a konténerben lévp blokk szintű elemeket egymás mellé vagy egymás alá teszi. )
- inline-grid - a konténert inline elemként kezeli.
- inline-flex - a flex konténert inline elemként kezeli
- table - ez és a többi elem stílusokkal hozza létre a táblázatokat. egyszerűbb használni a table tagh-et.
- inline-table - inline lesz a tablázat.
- initial - a böngésző által alapértelmezetten megadott display érték
- inherit - a tag szülőelemétől öröklött érték.