display
Ustala, jak element zachowuje się w układzie strony i jak układa swoje dzieci.
- Wartość domyślna
inline- Dziedziczona
- Nie
- Animowalna
- nie, zmienia się skokowo
- Dotyczy
- wszystkie elementy
- JavaScript
element.style.display = "flex"
Przykład
#.menu {
display: flex;
gap: 16px;
}
.menu a {
display: inline-block;
padding: 8px 14px;
}<nav class="menu stage">
<a href="#">Kursy</a>
<a href="#">Dokumentacja</a>
<a href="#">Kolekcje</a>
</nav>Definicja i zastosowanie
#Właściwość display to podstawa każdego układu. Mówi dwie rzeczy: jak element zachowuje się na zewnątrz (czy zaczyna nową linię jak blok, czy płynie w tekście jak element liniowy) i jak układa swoje dzieci (zwykły przepływ, Flexbox, Grid).
Elementy blokowe, takie jak <div> czy <p>, zajmują całą dostępną szerokość i zaczynają się od nowej linii. Elementy liniowe, takie jak <span> czy <a>, płyną w tekście i ignorują szerokość oraz wysokość. inline-block łączy oba światy: element stoi w linii, ale da się mu nadać wymiary.
Wartości flex i grid zamieniają element w kontener nowoczesnego układu, a none całkowicie usuwa element ze strony, łącznie z miejscem, które zajmował.
Składnia
#display: block | inline | inline-block | flex | inline-flex | grid | inline-grid | none | contents | …;Wartości
#- Elementy płyną w linii jak tekst. Szerokość
110pxjest ignorowana. - Każdy element zaczyna nową linię i respektuje szerokość.
- Elementy stoją w jednej linii, ale mają swoją szerokość i marginesy pionowe.
- Kontener układa dzieci w elastycznym wierszu. Tu wartość nadajemy rodzicowi.
- Kontener układa dzieci w siatce. Tu trzy równe kolumny.
- Element znika i nie zajmuje miejsca. Tu ukrywamy drugi element.
Wartości w praktyce
#inline
110px jest ignorowana..item { display: inline; }block
.item { display: block; }inline-block
.item { display: inline-block; }flex
.stage { display: flex; gap: 6px; }grid
.stage { display: grid; grid-template-columns: repeat(3, 1fr); }
.item { width: auto; }none
.item:nth-child(2) { display: none; }Obsługa przeglądarek
#Szeroko dostępne
Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.
- Chrome
- Edge
- Firefox
- Safari
Dobre praktyki
#- Jeśli
widthalbomargin-topnie działa na elemencie, sprawdź, czy nie jest liniowy. Pomożeinline-blockalboblock. - Do ukrycia elementu tylko wizualnie, z zachowaniem dla czytników ekranu, nie używaj
display: none.
Powiązane hasła
#- positionWybiera sposób pozycjonowania elementu: w przepływie, względnie, absolutnie, na stałe lub przyklejony.
- visibilityUkrywa element, ale zostawia puste miejsce, które zajmował.
- flex-directionUstala kierunek osi głównej: elementy flex układają się w wierszu albo w kolumnie.
- grid-template-columnsDefiniuje kolumny siatki: ich liczbę i szerokości.
- floatPrzesuwa element do lewej lub prawej krawędzi, a tekst opływa go z drugiej strony.
Widzisz błąd albo brakuje przykładu? Napisz do nas.