CSS display egenskab

Definition og brug

display egenskab definerer typen af boks, som elementet skal generere.

Beskrivelse

Denne egenskab bruges til at definere typen af visningsboks, som elementet genererer under layout. For dokumenttyper som HTML kan det være farligt at bruge display uden forsigtighed, da det kan bryde den allerede definerede visningshierarki i HTML. For XML, hvor der ikke er en indbygget sådan hierarki, er alle display værdier absolut nødvendige.

Kommentarer:CSS2 havde værdierne compact og marker, men på grund af manglende bredt støtte er de blevet fjernet fra CSS2.1.

Se også:

CSS undervisning:CSS positionering

HTML DOM referencemanual:display egenskab

Eksempel

Lad afsnittet skabe en indlejret ramme:

p.inline
  {
  display:inline;
  }

Prøv det selv

CSS syntaks

display: value;

Attributværdi

Værdi Beskrivelse
none Dette element vises ikke.
block Dette element vises som et blokkeligt element, og der er linjeskift foran og efter elementet.
inline Standard. Dette element vises som et indlejret element, og der er ingen linjeskift foran og efter elementet.
inline-block Indlejret blokkeligt element. (En ny værdi tilføjet i CSS2.1)
list-item Dette element vises som en liste.
run-in Dette element vises som en blokkeligt element eller et indlejret element afhængigt af konteksten.
compact CSS har værdien compact, men på grund af manglende bredt støtte er den blevet fjernet fra CSS2.1.
marker Der er en værdi marker i CSS, men på grund af manglende bredt støtte er den blevet fjernet fra CSS2.1.
table Dette element vises som en bloklelement tabel (lignende <table>), med linjeskift før og efter tabellen.
inline-table Dette element vises som en inline tabel (lignende <table>), uden linjeskift før og efter tabellen.
table-row-group Dette element vises som en eller flere rækker grupperet (lignende <tbody>).
table-header-group Dette element vises som en eller flere rækker grupperet (lignende <thead>).
table-footer-group Dette element vises som en eller flere rækker grupperet (lignende <tfoot>).
table-row Dette element vises som en tabelrække (lignende <tr>).
table-column-group Dette element vises som en eller flere kolonners grupper (lignende <colgroup>).
table-column Dette element vises som en celledøjfe (lignende <col>)
table-cell Dette element vises som en tabelcelle (lignende <td> og <th>)
table-caption Dette element vises som en tabeloverskrift (lignende <caption>)
inherit Det specificeres, at værdien af display-egenskaben skal arves fra forældreelementet.

Tekniske detaljer

Standardværdi: inline
Arv: nej
Version: CSS1
JavaScript-syntaks: object.style.display="inline"

TIY-eksempel

Hvordan man viser et element som et inline-element
Dette eksempel viser, hvordan man viser et element som et inline-element.
Hvordan man viser et element som en bloklelement
Dette eksempel viser, hvordan man viser et element som en bloklelement.

Browserunderstøttelse

Tallene i tabellen angiver den første browserversion, der fuldt ud understøtter egenskaben.

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

Kommentarer:Hvis !DOCTYPE er defineret, understøtter Internet Explorer 8 (og højere versioner) egenskabsværdierne "inline-table", "run-in", "table", "table-caption", "table-cell", "table-column", "table-column-group", "table-row", "table-row-group" samt "inherit".