5.01a Inline és doboz

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.