CSS Display Tulajdonság

A display tulajdonság meghatározza, hogyan jelenjen meg egy elem a dokumentumban. Ez az oldal bemutatja a leggyakrabban használt display értékeket és azok hatását.

display: block

A block elemek:

Új sorban kezdődnek
Teljes rendelkezésre álló szélességet elfoglalják
Tisztelik a width és height beállításokat
Margin és padding minden irányban működik

Block elem 1

Block elem 2

Block elem (width: 50%)

.block-element {
    display: block;
    width: 50%;  /* Működik! */
    margin: 10px;
    padding: 10px;
}

display: inline

Az inline elemek:

A szöveg folyamában maradnak
Csak a tartalmuk szélességét foglalják el
NEM tisztelik a width és height beállításokat
Csak vízszintes margin és padding működik

Szöveg kezdete Inline elem 1 Inline elem 2 Width nem működik! Szöveg vége

.inline-element {
    display: inline;
    width: 200px;  /* Nem működik! */
    margin: 10px;  /* Csak vízszintesen működik */
    padding: 10px;
}

display: inline-block

Az inline-block elemek az inline és block elemek tulajdonságait ötvözik:

A szöveg folyamában maradnak (mint az inline)
De tisztelik a width és height beállításokat (mint a block)
Margin és padding minden irányban működik

Szöveg kezdete

Inline-block 1

Width: 200px

Inline-block 3

Szöveg vége

.inline-block-element {
    display: inline-block;
    width: 200px;  /* Működik! */
    margin: 10px;  /* Minden irányban működik */
    padding: 10px;
}

display: none vs visibility: hidden

Két fő módja van egy elem elrejtésének:

display: none - Az elem teljesen eltűnik, nem foglal helyet
visibility: hidden - Az elem láthatatlan, de helyet foglal

Első elem

Ez az elem tűnik el (display: none)

Ez az elem válik láthatatlanná

Utolsó elem

.hidden-element {
    display: none;  /* vagy */
    visibility: hidden;
}

Display Típusok Összehasonlítása

Tulajdonság	block	inline	inline-block
Új sorban kezdődik	✅	❌	❌
Teljes szélesség	✅	❌	❌
Width/Height	✅	❌	✅
Margin (minden irány)	✅	❌	✅
Padding (minden irány)	✅	✅	✅