CSS weergave eigenschap

Definition and usage

The display property specifies the type of box that the element should generate.

Description

This property is used to define the type of display box generated by the element when establishing the layout. For document types such as HTML, using display incautiously can be dangerous because it may violate the display hierarchy already defined in HTML. For XML, since XML does not have an inherent such hierarchy, all display is absolutely necessary.

Opmerking:In CSS2, there were values 'compact' and 'marker', but due to lack of widespread support, they have been removed from CSS2.1.

See also:

CSS Tutorial:CSS Positioning

HTML DOM Reference Manual:display property

Example

To make the paragraph have an inline frame:

p.inline
  {
  display:inline;
  }

Try it yourself

CSS syntax

display: value;

Attribute value

Value Description
none This element will not be displayed.
block This element will be displayed as a block-level element, with line breaks before and after the element.
inline Default. This element will be displayed as an inline element, with no line breaks before or after the element.
inline-block Inline block element. (A new value added in CSS2.1)
list-item This element will be displayed as a list.
run-in This element will be displayed as a block-level element or inline element depending on the context.
compact In CSS, there is a value called 'compact', but due to lack of widespread support, it has been removed from CSS2.1.
marker Er is een waarde marker in CSS, maar vanwege het gebrek aan algemene ondersteuning is deze verwijderd uit CSS2.1.
table Dit element wordt weergegeven als een blokgeneigde tabel (gelijk aan <table>), met regeleinden voor en achter de tabel.
inline-table Dit element wordt weergegeven als een inline-tabel (gelijk aan <table>), met geen regeleinden voor en achter de tabel.
table-row-group Dit element wordt weergegeven als een of meerdere rijgroepen (gelijk aan <tbody>)
table-header-group Dit element wordt weergegeven als een of meerdere rijgroepen (gelijk aan <thead>)
table-footer-group Dit element wordt weergegeven als een of meerdere rijgroepen (gelijk aan <tfoot>)
table-row Dit element wordt weergegeven als een tabelrij (gelijk aan <tr>)
table-column-group Dit element wordt weergegeven als een of meerdere kolomgroepen (gelijk aan <colgroup>)
table-column Dit element wordt weergegeven als een celkolom (gelijk aan <col>)
table-cell Dit element wordt weergegeven als een tabelcel (gelijk aan <td> en <th>)
table-caption Dit element wordt weergegeven als een tabeltitel (gelijk aan <caption>)
inherit Het wordt voorgesteld dat de waarde van de display-eigenschap van het ouder element moet worden overgenomen.

Technische details

Standaardwaarde: inline
Inheritantie: nee
Versie: CSS1
JavaScript syntaxis: object.style.display="inline"

TIY voorbeeld

Hoe een element wordt weergegeven als een inline-element
Dit voorbeeld demonstreert hoe een element wordt weergegeven als een inline-element.
Hoe een element wordt weergegeven als een blokgeneigd element
Dit voorbeeld demonstreert hoe een element wordt weergegeven als een blokgeneigd element.

Browserondersteuning

De cijfers in de tabel vermelden de eerste browserversie die de eigenschap volledig ondersteunt.

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

Opmerking:Als !DOCTYPE is gedefinieerd, ondersteunt Internet Explorer 8 (en hogere versies) de eigenschapswaarden "inline-table", "run-in", "table", "table-caption", "table-cell", "table-column", "table-column-group", "table-row", "table-row-group" en "inherit".