Atrybut display w CSS

Definicja i użycie

Atrybut display określa typ ramki generowanej przez element.

Wyjaśnienie

Ta właściwość służy do określenia typu ramki wyświetlanej przez element podczas tworzenia układu. W przypadku typów dokumentów takich jak HTML, użycie display bez ostrożności może być niebezpieczne, ponieważ może naruszyć już zdefiniowaną strukturę wyświetlania w HTML. W przypadku XML, ponieważ XML nie ma wbudowanej takiej struktury, display jest absolutnie niezbędny.

Komentarz:W CSS2 istnieją wartości compact i marker, ale ze względu na brak wszechstronnego wsparcia, zostały usunięte z CSS2.1.

Zobacz również:

Wykład CSS:Umieszczanie CSS

Przeglądarka HTML DOM:Atrybut display

Przykład

Stwórz wewnętrzny ramka akapitu:

p.inline
  {
  display:inline;
  }

Spróbuj sam

Gramatyka CSS

display: value;

Wartość atrybutu

Wartość Opis
none Ten element nie będzie wyświetlany.
block Ten element będzie wyświetlany jako blokowy element, z odwróconymi znakami nowej linii przed i po elemencie.
inline Domyślnie. Element będzie wyświetlany jako wewnętrzny element, bez odwróconych znaków nowej linii przed i po elemencie.
inline-block Element wewnętrzny w linię. (Wartość dodana w CSS2.1)
list-item Ten element będzie wyświetlany jako lista.
run-in Ten element będzie wyświetlany jako blokowy lub wewnętrzny element w zależności od kontekstu.
compact W CSS istnieje wartość compact, ale ze względu na brak wszechstronnego wsparcia, została usunięta z CSS2.1.
marker W CSS istnieje wartość marker, ale z powodu braku szerokiej obsługi została usunięta z CSS2.1.
table Ten element będzie wyświetlany jako blokowa tabela (podobnie jak <table>), z odwróconymi znakami nowej linii przed i po tabeli.
inline-table Ten element będzie wyświetlany jako wewnętrzna tabela (podobnie jak <table>), bez odwróconych znaków nowej linii przed i po tabeli.
table-row-group Ten element będzie wyświetlany jako grupa jednej lub kilku wierszy (podobnie jak <tbody>).
table-header-group Ten element będzie wyświetlany jako grupa jednej lub kilku wierszy (podobnie jak <thead>).
table-footer-group Ten element będzie wyświetlany jako grupa jednej lub kilku wierszy (podobnie jak <tfoot>).
table-row Ten element będzie wyświetlany jako wiersz tabeli (podobnie jak <tr>).
table-column-group Ten element będzie wyświetlany jako grupa jednej lub kilku kolumn (podobnie jak <colgroup>).
table-column Ten element będzie wyświetlany jako kolumna komórki (podobnie jak <col>)
table-cell Ten element będzie wyświetlany jako komórka tabeli (podobnie jak <td> i <th>)
table-caption Ten element będzie wyświetlany jako tytuł tabeli (podobnie jak <caption>)
inherit Zaleca się, aby wartość atrybutu display było dziedziczone od elementu nadrzędnego.

Szczegółowe informacje techniczne

Domyślna wartość: inline
Inherencyjność: nie
Wersja: CSS1
Gramatyka JavaScript: object.style.display="inline"

Przykład TIY

Jak wyświetlić element jako wewnętrzny
Ten przykład pokazuje, jak wyświetlić element jako wewnętrzny.
Jak wyświetlić element jako blokowy
Ten przykład pokazuje, jak wyświetlić element jako blokowy.

Obsługa przeglądarek

Liczby w tabeli wskazują na pierwszą wersję przeglądarki, która obsługuje pełną funkcjonalność tego atrybutu.

Chrome IE / Edge Firefox Safari Opera
4.0 8.0 3.0 3.1 7.0

Komentarz:Jeśli określono !DOCTYPE, to Internet Explorer 8 (i wersje wyższe) obsługuje wartości atrybutów "inline-table", "run-in", "table", "table-caption", "table-cell", "table-column", "table-column-group", "table-row", "table-row-group" oraz "inherit".