Minden HTML elemet valamilyen tároló formájában van definiálva, meghatározott formával és tulajdonságokkal, azzal hogy éppen mi mellett foglalhat helyet. Vannak dobozaink, vannak kis tégláink, és ezeknek számos funkciói. Képzeljünk el egy polcrendszert (egy sorban egymás alatt vannak egyesével a polcok) amin minden egyes polc 1 egység széles, a dobozunk 1 egység széles függetlenül attól hogy mennyi tartalom van benne, a téglánk pedig kisebb mint 1 attól függően hogy mennyi tartalom van benne. A dobozok alapvetően nem mennek egymás mellé, a téglákat tetszés szerint pakolod sorba, ameddig csak felférnek a polcra. A polcoknak magasságot nem definiálunk, mert az akkora amekkora tartalom van az egyes tárolókba (pl ahány soros egy bekezdés).

A diplay tulajdonságot úgy tudnánk röviden összefoglalni, hogy egy elemnek felülírhatod a tároló típusát, tehát megmondjuk a téglának hogy te mától doboz vagy és úgy is fogsz viselkedni.  Meghatározott alapértéke nincs a display tulajdonságnak, ugyanis a doboznak doboz, a téglának tégla, és az egyébnek egyéb, ezt mind-mind az egyes elemek foglalják magukba. Mindre példát mutatni, és mindet kifejteni kissé bonyolult, illetve nem is nagyon van rá szükségünk, így 2 illetve 3 olyan dolgot mutatnék be, ami nekünk fontos lehet.

A továbbiakban őket szeretnénk felhozni példának, bemutatjuk a bekezdést( <p></p>) mint dobozt, és a span-t(<span></span>) mint téglát:

És látjuk is, a bekezdések szépen egymás alatt elkülönülve, a span-ok pedig szépen bepakolva egymás mellé mint a téglák! A példának okáért, mindkettőnek adtunk egy szürke háttérszínt, hogy szemléletesebb legyen!

Alma

Almafa

Alma Almafa

Használta

Doboznak tekinthetünk például egy bekezdést, a bekezdés minden betűje egy nagy dobozba van benne, alap esetben kitölti azt a teret amit a rendelkezésére bocsájtunk, és ha alárakunk még egy bekezdést, az előző egyértelműen elkülönül a másiktól. Ilyen esetben a dobozok egymás alá, esetleg egymásba rakhatóak, de lényegesen nagyobb munka egymás mellé helyezni őket, (természetesen erre is vannak külön tároló típusok).
Módosíthatod a méretüket, a benne található tartalmat, adhatsz neki margókat keretet bármit, de akármennyire is le kicsinyíted, akárhogy összehúzod a következő dobozod nem fog beugrani a helyére foglaljon az előző akármennyi is. Ez csak lényegesebb beleavatkozással lehetséges, vagy ha megváltoztatod egy alkalmasabbra a display-t.
Fogunk egy téglát, és megmondjuk neki hogy te most doboz leszel!

Mintha csak  két bekezdés lenne ugye? (ugye itt azért nincs "sorköz" a két block típusú elem között mert span-t raktunk blockká míg a p mint bekezdés előre definiált elembe, bele van építve egy kis térköz)

Alma Almafa

A tégla típusú elemeknek az a fő tulajdonságokat, hogy pontosan ott van vége a tárolónak ahol vége van a benne található tartalomnak. Tehát felfoghatjuk úgy is, dehogy a tároló amibe az "Alma" szó van benne kisebb mint az "Almafa" tárolója. A szürke háttérkiemeléssel ez remekül szemléltethető. Ennek a típusú tárolónak lényegében nincs kiterjedése, annyit pakolunk egymás mellé amennyit akarunk, ha egy span-unk a sor végén végetér, az következő elején ugyan úgy folytatódik. Fotos hogy egy inline elemnél nem tudunk méretet definiálni, erre megoldást kínál az inline-block szintű elem, ami a kettőnek a fúziója.

Egy doboznak is megadhatjuk ezt a tulajdonságot, több bekezdést folytatólagosan összefűzhetünk, csupán ennyit kell tennünk:

Lássuk hát (itt szintén azért látunk "szóközt" a két mostmár inline elem között mert a p-nek van egy aprócska marginja, vagyis a böngésző kedves és odarakja nekünk):

Alma

Almafa

Nem csak váltogathatjuk az egyes elemek tároló típusát de el is tüntethetjük őket! Ha nincs szükséged egy-egy beépített elemre (amit nem te raktál oda) a display tulajdonásggal megteheted. Sokaknak ismerős lehet a visibility:hidden; tulajdonság is, aminek szintén hasonló a feladata. Azzal a külömbséggel hogy visibility-vel az elem "helye" ottmarad, még a display:none;-al, teljes egészében eltűnik.

Persze, ezeken kívül a displaynek számos tulajdonsága lehet, de ehhez ismerni kell a HTML-ben definiálható elemek típusát és tulajdonságait és azt kell eldöntenünk hogy miből mit akarunk csinálni. A Display tulajdonságot legfőképpen akkor piszkáljuk ha egy adott elem helyett nem tudunk másik megfelelőbbet definiálni, és szükségünk van rá a megfelelő megjelenéshez. Ebben a példában, nem túl látványosan de megnézhetitek hogy nagyjából melyik tulajdonság hogyan viselkedik. 

Ez a leírás bár töredékét nem fedi le a display lehetőségeinek, de igyekeztünk olyan mélységekbe belemenni amennyire mi fogjuk használni az oldalon néhány leírásnál. Ha többet szeretnél még tudni a display tulajdonságról ajánljuk figyelmedbe az alábbi linkeket: # #