Przejdź do treści

Wyświetlanie {display}

Jak ukryć dowolny element strony? W jaki sposób zmienić domyśle wyświetlanie dowolnych elementów strony, tak aby stały się wykazem czy tabelką?

selektor { display: sposób }
Selektorem może być praktycznie dowolny znacznik [zobacz: Wstawianie stylów].

Natomiast jako "sposób" należy podać:
  • block - element będzie wyświetlony w bloku (odstęp z góry i z dołu)
  • inline - element będzie wyświetlony w linii (sąsiadująco z innymi)
  • list-item - element wykazu: <li>...</li>
  • none - element nie będzie wyświetlany
  • inline-block - element zachowuje się podobnie jak element zastępowany (Firefox 3, Opera 7, Chrome, Konqueror)
  • run-in - jeśli po elemencie następuje brat będący blokiem, element zostanie sformatowany jako "inline" (w linii) w ramach treści brata. W przeciwnym razie element zostanie sformatowany jako "block" (Opera 6, Chrome)
  • table - tabela blokowa: <table>...</table>
  • inline-table - tabela "inline": <table>...</table>
  • table-row-group - grupa wierszy tabeli: <tbody>...</tbody>
  • table-header-group - nagłówek tabeli: <thead>...</thead>
  • table-footer-group - stopka tabeli: <tfoot>...</tfoot>
  • table-row - wiersz tabeli: <tr>...</tr>
  • table-column-group - grupa kolumn tabeli: <colgroup>...</colgroup>
  • table-column - kolumna tabeli: <col>
  • table-cell - komórka tabeli: <td>...</td>, <th>...</th>
  • table-caption - tytuł (podpis) tabeli: <caption>...</caption>
  • compact - analogicznie jak run-in (CSS 2, ale nie CSS 2.1)
  • marker - wyróżnik wykazu (CSS 2, ale nie CSS 2.1)

Polecenie to pozwala określić sposób, w jaki będzie wyświetlony na ekranie dany element. Jest to bardzo przydatna funkcja, jeśli chcemy zrezygnować z domyślnego sposobu wyświetlania. Na przykład: wszystkie tytuły (<Hn>...</Hn>) są wyświetlane domyślnie w bloku, tzn. automatycznie są dodawane linijki przerwy pomiędzy danym tytułem a sąsiadującymi z nim elementami. Lecz dzięki poleceniu "display: inline" możliwe jest ustawienie dwóch sąsiednich tytułów w jednej linii.

Natomiast użycie "display: list-item" okazuje się przydatne w stosunku do elementu wykazu (znacznik <li>...</li>), kiedy chcemy przywrócić normalny sposób jego wyświetlania (który został zmieniony np. w arkuszu stylów), nie zmieniając jednocześnie wyświetlania dla innych elementów <li>...</li>. Oczywiście można w ten sposób również tworzyć punkty wykazu z innych znaczników niż <li>...</li>.

Polecenie "display: none" okazuje się bardziej przydatne, niż początkowo można by sądzić. Przykładowe zastosowanie to usunięcie niektórych elementów strony podczas jej drukowania [zobacz: Media]. Nie ma raczej sensu drukować menu nawigacyjnego, które powtarza się na każdej stronie, ponieważ na papierze i tak będzie ono całkowicie bezużyteczne. Zastosowanie tego polecenia pozwoli zaoszczędzić trochę papieru, a jednocześnie sprawi, że wydruk będzie wyglądał bardziej spójnie.

Polecenie display: none jest zbliżone do visibility: hidden. Różnica polega na tym, że pierwsze z nich całkowicie usuwa element z ekranu, natomiast drugie tylko go ukrywa - w miejscu gdzie miał być wyświetlony, jest widoczne puste miejsce.

Działanie "display: run-in" jest bardziej skomplikowane, dlatego posłużę się przykładem:

<div style="display: run-in">
	Ten element zostanie wyświetlony w linii w ramach brata.
</div>
<div>
	Brat ("block")
</div>
<br>
<div style="display: run-in">
	Ten element zostanie wyświetlony jako blok.
</div>
<span>Brat ("inline")</span>
<br><br>
<div style="display: run-in">
	Ten element zostanie wyświetlony jako blok.
</div>
Tekst

Na ekranie powinniśmy zobaczyć taki układ treści:

Ten element zostanie wyświetlony w linii w ramach brata. Brat ("block")

Ten element zostanie wyświetlony jako blok.
Brat ("inline")

Ten element zostanie wyświetlony jako blok.
Tekst
Ten element zostanie wyświetlony w linii w ramach brata.
Brat ("block")

Ten element zostanie wyświetlony jako blok.
Brat ("inline")

Ten element zostanie wyświetlony jako blok.
Tekst

Przykład {display}

To jest zwykły tekst

To jest normalny akapit (wyświetlany w bloku).

To jest zwykły tekst

To jest akapit w linii.

To jest zwykły tekst



display: block display: blockdisplay: block


display: inline display: inlinedisplay: inline


display: none display: nonedisplay: none
(obrazek nie został wyświetlony, pomimo że polecenie odpowiedzialne za jego wstawienie zostało umieszczone na stronie)


<div style="display: list-item">...</div>
<div style="display: list-item">...</div>
<div style="display: list-item">...</div>



<div style="display: table; border-spacing: 1px; border: 1px solid black">
<div style="display: table-row">
	<div style="display: table-cell; border: 1px solid gray">komórka1</div>
	<div style="display: table-cell; border: 1px solid gray">komórka2</div>
</div>
<div style="display: table-row">
	<div style="display: table-cell; border: 1px solid gray">komórka3</div>
	<div style="display: table-cell; border: 1px solid gray">komórka4</div>
</div>
</div>
komórka1
komórka2
komórka3
komórka4

Jest to odpowiednik następującej tabeli:

<table style="border-spacing: 1px; border: 1px solid black">
<tr>
	<td style="border: 1px solid gray">komórka1</td>
	<td style="border: 1px solid gray">komórka2</td>
</tr>
<tr>
	<td style="border: 1px solid gray">komórka3</td>
	<td style="border: 1px solid gray">komórka4</td>
</tr>
</table>
komórka1komórka2
komórka3komórka4



To jest zwykły tekst
display: inline-block; width: 150px; height: 100px; background-color: silver
To jest zwykły tekst

Dla porównania zwykły blok:

To jest zwykły tekst
width: 150px; height: 100px; background-color: silver
To jest zwykły tekst

Pytania i odpowiedzi {display}

Do czego służy "display" w CSS?

W CSS, właściwość display kontroluje sposób, w jaki element jest renderowany w przeglądarce. Określa, czy element jest blokowy, liniowy, czy ma inne właściwości renderowania.

Jak ukryć coś w CSS?

Aby ukryć coś w CSS, można użyć atrybutu display z wartością none. To całkowicie ukryje element.

Co robi atrybut CSS "display: none"?

Atrybut CSS "display: none" całkowicie ukrywa element na stronie. Element nie jest renderowany i nie zajmuje miejsca w układzie strony. Jest to sposób na ukrycie elementu przed użytkownikami.

Co robi "display: inline"?

Deklaracja "display: inline" w CSS sprawia, że element zachowuje się jak element liniowy. Elementy "inline" są wyświetlane obok siebie w tej samej linii, dopóki nie brakuje miejsca, a następnie przechodzą do nowej linii.

Jaka jest różnica między "inline" a "inline-block"?

Różnica między inline a inline-block polega na tym, że elementy inline zachowują się jak tekst i nie można ustawić dla nich szerokości ani wysokości, podczas gdy elementy inline-block zachowują się jak elementy blokowe, ale nadal są wyświetlane w jednej linii, a można dla nich ustawić szerokość i wysokość.

Jak wyśrodkować "inline-block"?

Aby wyśrodkować element inline-block wewnątrz jego kontenera, można użyć właściwości CSS "text-align: center" dla kontenera. To spowoduje wyśrodkowanie elementu poziomo wewnątrz kontenera. Na przykład: <div style="text-align: center"> <span style="display: inline-block">Wyśrodkowany element</span> </div>.

Przeglądarki


Chrome
Firefox
Edge
Opera
Safari
display: wartość1
2008-12-11		1
2004-11-09		12
2015-07-29		7
2003-01-28		1
2003-06-23
display: block1
2008-12-11		1
2004-11-09		12
2015-07-29		7
2003-01-28		1
2003-06-23
display: flex29
2013-08-20		20
2013-04-02		12
2015-07-29		16
2013-08-27		9
2015-09-30
display: inline1
2008-12-11		1
2004-11-09		12
2015-07-29		7
2003-01-28		1
2003-06-23
display: inline-block1
2008-12-11		1
2004-11-09		12
2015-07-29		7
2003-01-28		1
2003-06-23
display: inline-flex29
2013-08-20		20
2013-04-02		12
2015-07-29		16
2013-08-27		9
2015-09-30
display: inline-table1
2008-12-11		3
2008-06-17		12
2015-07-29		7
2003-01-28		1
2003-06-23
display: list-item1
2008-12-11		1
2004-11-09		12
2015-07-29		7
2003-01-28		1
2003-06-23
display: none1
2008-12-11		1
2004-11-09		12
2015-07-29		7
2003-01-28		1
2003-06-23
display: table1
2008-12-11		1
2004-11-09		12
2015-07-29		7
2003-01-28		1
2003-06-23
display: table-caption≤80
2020-02-04		1
2004-11-09		≤80
2020-02-07		≤67
2020-03-03		≤13.1
2020-03-24
display: table-cell1
2008-12-11		1
2004-11-09		12
2015-07-29		7
2003-01-28		1
2003-06-23
display: table-column1
2008-12-11		1
2004-11-09		12
2015-07-29		7
2003-01-28		1
2003-06-23
display: table-column-group1
2008-12-11		1
2004-11-09		12
2015-07-29		7
2003-01-28		1
2003-06-23
display: table-footer-group1
2008-12-11		1
2004-11-09		12
2015-07-29		7
2003-01-28		1
2003-06-23
display: table-header-group1
2008-12-11		1
2004-11-09		12
2015-07-29		7
2003-01-28		1
2003-06-23
display: table-row1
2008-12-11		1
2004-11-09		12
2015-07-29		7
2003-01-28		1
2003-06-23
display: table-row-group1
2008-12-11		1
2004-11-09		12
2015-07-29		7
2003-01-28		1
2003-06-23

Komentarze

Zobacz więcej komentarzy

Facebook