Display tulajdonságok

A display meghatározások nagy előnye, a kiválasztott elemek, vagy szülőelemhez tartozó közvetlen gyermekelemek megjelenésének, stílusának meghatározásában rejlik.
A display meghatározásnál, nem kell a kiválasztott elemeknek egyenként stílust meghatározni.
Alkalmazhatjuk akkor is, ha a jelölőelemeknek előzőleg meghatároztuk a stílusaikat, majd később meggondoltuk, és új stílust akarunk meghatározni úgy, hogy a megírt tartalmi részt, ne keljen módosítani.

Gyakran használt display meghatározások,
melyeket minden böngésző, egyformán jelenít meg.
display:none Kiválasztott elem, vagy elemek elrejtése. display:block Elrejtett elem, vagy elemek megjelenítése. Kiválasztott elemeket, blokk formátumba, azaz, külön sorba rendezi. display:inline Kiválasztott elem, vagy elemek, egy sorba rendezése. Alkalmazása az <a> URL cím </a> és <li> List szöveg.</li> elemeknél gyakori. display:inline-block Kiválasztott elem, vagy elemek, inline elemként vannak formázva, de magassági és szélességi értékeket is alkalmazhat. A float:left meghatározásu box elemeket követő box elemnél, display: inline-block; alkalmazásakor, nincs szükség, clear:left; meghatározásra. display:table Kiválasztott elem, vagy elemek, úgy viselkedjenek, mint egy <table> elem.. display:list-item Kiválasztott, de nem <ul> <li> formátumú elemeket, <ul> <li> formátumba rendezi. display:inherit; Szülő elemnek meghatározott display tulajdonságot, stílust, átadja a gyermek elemeknek úgy, hogy nem kell gyermek elemeknek külön-külön stílust meghatározni.

Display meghatározások,
és megjelenéseik.

display: none; Elemek elrejtése. A tema tartalmát elrejti. Mozgasd ide az egeret. .tema {display: none;}	<div class="tema"> <p> Első p elem.</p> <p> Második p elem.</p> </div>
display: block; Elrejtett elemek megjelenítése. A tema tartalmának megjelenítése. Mozgasd ide az egeret. .tema {display: block;}	<div class="tema"> <p> Első p elem.</p> <p> Második p elem.</p> </div>
display: inline; Kiválasztott elemek, egy sorba. Így, érvényes minden elemre, melyek class="line" azonosítóval rendelkeznek. .line{display: inline; font-size: 13px; border: 2px solid white;} Megjegyzés: A li elemeknél, törli az előjeleket. Így, érvényes minden li-re, melyek ul elemben vannak. ul li{display: inline; font-size: 13px; border: 2px solid white;} Így, csak azon li elemekre érvényes, melyek <ul class="dispul"> elemben vannak. .dispul li {display: inline; font-size: 13px; border: 2px solid white;}	<p class="line"> Első p elem.</p> <p class="line"> Második p elem.</p> <ul> <li class="line"> Első li elem.</li> <li class="line"> Második li elem.</li> </ul> <ul class="dispul"> <li> Első li elem.</li> <li> Második li elem.</li> </ul> Első p elem. Második p elem. Első li elem. Második li elem. Első li elem. Második li elem.
Kiválasztott elemben, minden elemre érvényes display: block; meghatározás. <style> #displaybox *{display: block; font-size: 13px; color:blue; border: 2px solid white; padding: 2px; margin: 5px;} </style> </head>
<body> <div id="displaybox"> <div>div-1 <div>div-2 <div>div-3</div> </div> <div>div-4 <div>div-5 <p class="ameret12">p bekezdés.<span> span</span></p> </div> </div> </div> </div> </body>	div-1 div-2 div-3 div-4 div-5 p bekezdés. span
Szövegközi tömb: display:inline-block Példa: <div class="float-box">Float <br /> box</div> <div class="float-box">Float <br /> box</div> <div class="float-box">Float <br /> box</div> <div class="uj-box"> Új box, floattoltak után.</div> <p> Új bekezdés. </p>	1.Példa: (clear meghatározás nélkül.) .float-box { float: left; width: 40px; height: 40px; margin: 5px; border: 3px solid #73AD21; } .uj-box { border: 3px solid red; } Float box Float box Float box Új box, floattoltak után Új bekezdés. 2.Példa: (clear meghatározással.) .float-box { float: left; width: 40px; height: 40px; margin: 5px; border: 3px solid #73AD21; } .uj-box {clear: left; border: 3px solid red; } Float box Float box Float box Új box, floattoltak után Új bekezdés. 3.Példa: inline-block; clear meghatározás nélkül. Ugyanez a hatás érhető el display: inline-block; értéke alapján úgy, hogy nincs szükség clear meghatározásra. .float-box { display: inline-block; width: 40px; height: 40px; margin: 5px; border: 3px solid #73AD21; } .uj-box { border: 3px solid red; } Float box Float box Float box Új box, floattoltak után Új bekezdés.
Öröklés:display:inherit; <div id="apa"> <p class="gyermeke">Apa örököse.</p> <p class="gyermeke">Ez is apa örököse.</p> </div>	A <p class="gyermeke"> elemek, "apa" által meghatározott formátumban jelennek meg, és nem külön-külön sorban. #apa{display: inline;} .gyermeke{display: inherit;} Apa örököse. Ez is apa örököse.

Teszt példák, a további bemutatókhoz:
A <span> elemeben, másik kettő span elem is, van
A <li> elemekben, kettő span elem is, van.
A <td> cellákban, kettő span elem is, van.

  display CSS kód: ( Az "xxxx"-ek helyére írjuk, a display tulajdonságot.) 
     .Disp, .Disp li, .Disp td{font-size: 12px;}
    /* Meghatározzuk azon <span> elemek display stílusát, melyek a class="Disp" osztályazonosítóval rendelkező elemek területén vannak. */
      .Disp span{display:xxxx; border:1px solid red; background-color:yellow;}

Display

meghatározások.

↓

 <span class="Disp">Span elemeben.
   <span>1 span.</span> és  
   <span>2 span</span> is, van.
 </span>

Példa eredménye
display nélkül:

Span elemeben.1 span. és 2 span is, van.

 <ul class="Disp">
    <li>1 list 
       <span>1 span.</span> és 
       <span>2 span</span>
    </li>
    <li>2 list 
       <span>1 span.</span> és 
       <span>2 span</span>
    </li>
 </ul>

Példa eredménye
display nélkül:

1 list 1 span. és 2 span
2 list 1 span. és 2 span

<table class="Disp">
 <tr><td>1.cella 
   <span>1 span.</span> és 
   <span>2 span</span>
 </td></tr>
 <tr><td>2.cella 
   <span>1 span.</span> és 
   <span>2 span</span>
 </td></tr>
</table>

Példa eredménye
display nélkül:

1.cella 1.span. és 2.span.

2.cella 3.span. és 4.span.

display:inline
Elem inline elemként van formázva.
IE, Chrome, Firefox
Opera, Safari, Sleipnir6