CSS display egenskap

Definition och användning

display-attributet specificerar vilken typ av display-fack som elementet ska generera.

Förklaring

Denna egenskap används för att definiera vilken typ av display-fack som elementet genererar när layout byggs. För dokumenttyper som HTML är det farligt att använda display utan försiktighet, eftersom det kan bryta den redan definierade display-hierarkin i HTML. För XML, eftersom XML inte har en inbyggd sådan hierarki, är display absolut nödvändig.

Kommentarer:I CSS2 fanns värdena compact och marker, men på grund av bristande bred stöd har de tagits bort från CSS2.1.

Se också:

CSS kurs:CSS positionering

HTML DOM referenshandboken:display-attributet

Exempel

Skapa en inline-border för stycken:

p.inline
  {
  display:inline;
  }

Prova det själv

CSS-syntax

display: value;

Attributvärde

Värde Beskrivning
none Detta element visas inte.
block Detta element visas som ett block-element, med radbrytning före och efter elementet.
inline Standard. Detta element visas som ett inline-element, utan radbrytning före och efter elementet.
inline-block Inline-block-element. (En nytt värde i CSS2.1)
list-item Detta element visas som en lista.
run-in Detta element visas som en block-element eller inline-element beroende på kontexten.
compact CSS har ett värde compact, men på grund av bristande bred stöd har det tagits bort från CSS2.1.
marker I CSS finns värdet marker, men på grund av bristande bredt stöd har det tagits bort från CSS2.1.
table Detta element kommer att visas som en blocktabell (likt <table>), med radbrytningar före och efter tabellen.
inline-table Detta element kommer att visas som en inline-tabell (likt <table>), utan radbrytningar före och efter tabellen.
table-row-group Detta element kommer att visas som en eller flera radgrupper (likt <tbody>)
table-header-group Detta element kommer att visas som en eller flera radgrupper (likt <thead>)
table-footer-group Detta element kommer att visas som en eller flera radgrupper (likt <tfoot>)
table-row Detta element kommer att visas som en tabellrad (likt <tr>)
table-column-group Detta element kommer att visas som en eller flera kolumngrupper (likt <colgroup>)
table-column Detta element kommer att visas som en cellkolumn (likt <col>)
table-cell Detta element kommer att visas som en tabellcell (likt <td> och <th>)
table-caption Detta element kommer att visas som en tabellrubrik (likt <caption>)
inherit Det ska specificeras att display-egenskapen från föräldrelementet ska härledas.

Tekniska detaljer

Standardvärde: inline
Arvsförmåga: no
Version: CSS1
JavaScript-syntax: object.style.display="inline"

TIY-exempel

Hur man visar element som en inline-element
Detta exempel visar hur man visar element som en inline-element.
Hur man visar element som en blockinriktning
Detta exempel visar hur man visar element som en blockinriktning.

Webbläsarstöd

Tal i tabellen anger den första webbläsarens version som fullständigt stöder egenskapen.

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

Kommentarer:Om !DOCTYPE är specificerat, stöder Internet Explorer 8 (och högre versioner) egenskapsvärdena "inline-table", "run-in", "table", "table-caption", "table-cell", "table-column", "table-column-group", "table-row", "table-row-group" och "inherit".