CSS display ιδιότητα

Ορισμός και χρήση

Η ιδιότητα display καθορίζει τον τύπο του οπτικού κουτιού που πρέπει να δημιουργηθεί από το στοιχείο.

Σημείωση

Αυτή η ιδιότητα χρησιμοποιείται για να καθορίσει τον τύπο του οπτικού κουτιού που δημιουργείται από το στοιχείο κατά τη διάρκεια της δημιουργίας της διάταξης. Για τύπους εγγράφων όπως το HTML, η χρήση του display χωρίς προσοχή μπορεί να είναι επικίνδυνη, καθώς μπορεί να παραβιάσει τη δομή εμφάνισης που έχει ήδη οριστεί στο HTML. Για το XML, καθώς το XML δεν έχει ενσωματωμένη αυτή τη δομή, η χρήση του display είναι απολύτως απαραίτητη.

Σημείωση:Στο CSS2 υπάρχουν οι τιμές compact και marker, αλλά λόγω της έλλειψης ευρείας υποστήριξης, έχουν αφαιρεθεί από το CSS2.1.

Δείτε επίσης:

Εκμάθηση CSSΘέση CSS

Εγχειρίδιο HTML DOMΑξία display

Παράδειγμα

Δημιουργία περιβάλλοντος κειμένου εντός παραγράφου:

p.inline
  {
  display:inline;
  }

Δοκιμάστε το προσωπικά

Γλώσσα CSS

display: value;

Τιμή ιδιοτήτων

Τιμή Περιγραφή
none Αυτό το στοιχείο δεν θα εμφανιστεί.
block Αυτό το στοιχείο θα εμφανιστεί ως μπλοκ στοιχείο με παράλειψη γραμμής πριν και μετά το στοιχείο.
inline Προεπιλεγμένο. Αυτό το στοιχείο θα εμφανιστεί ως εσωτερικό στοιχείο χωρίς παράλειψη γραμμής πριν ή μετά το στοιχείο.
inline-block Εσωτερικό μπλοκ στοιχείο. (Νέα τιμή στο CSS2.1)
list-item Αυτό το στοιχείο θα εμφανιστεί ως λίστα.
run-in Αυτό το στοιχείο θα εμφανιστεί ως μπλοκ στοιχείο ή ως εσωτερικό στοιχείο ανάλογα με το κείμενο.
compact Η CSS έχει την τιμή compact, αλλά λόγω της έλλειψης ευρείας υποστήριξης, έχει αφαιρεθεί από το CSS2.1.
marker Στο CSS υπάρχει η τιμή marker, αλλά λόγω της έλλειψης ευρέως διαδεδομένης υποστήριξης, έχει αφαιρεθεί από το CSS2.1.
table Αυτό το στοιχείο θα εμφανίζεται ως μπλοκ τύμπα (παρόμοιο με <table>), με αλλαγή γραμμής πριν και μετά την τύμπα
inline-table Αυτό το στοιχείο θα εμφανίζεται ως εσωτερική τύμπα (παρόμοιο με <table>), χωρίς αλλαγή γραμμής πριν και μετά την τύμπα
table-row-group Αυτό το στοιχείο θα εμφανίζεται ως ομάδα ή περισσότερων γραμμών (παρόμοιο με <tbody>)
table-header-group Αυτό το στοιχείο θα εμφανίζεται ως ομάδα ή περισσότερων γραμμών (παρόμοιο με <thead>)
table-footer-group Αυτό το στοιχείο θα εμφανίζεται ως ομάδα ή περισσότερων γραμμών (παρόμοιο με <tfoot>)
table-row Αυτό το στοιχείο θα εμφανίζεται ως γραμμή της τύμπας (παρόμοιο με <tr>)
table-column-group Αυτό το στοιχείο θα εμφανίζεται ως ομάδα ή περισσότερων στηλών (παρόμοιο με <colgroup>)
table-column Αυτό το στοιχείο θα εμφανίζεται ως στήλη κελιού (παρόμοιο με <col>)
table-cell Αυτό το στοιχείο θα εμφανίζεται ως κελί της τύμπας (παρόμοιο με <td> και <th>)
table-caption Αυτό το στοιχείο θα εμφανίζεται ως τίτλος της τύμπας (παρόμοιο με <caption>)
inherit Η διαδικασία καθορίζει ότι η τιμή του χαρακτηριστικού display πρέπει να προέρχεται από το γονικό στοιχείο.

Τεχνικά λεπτομέρειες

Προεπιλεγμένη τιμή: inline
Εκδοχικότητα: no
Έκδοση: CSS1
Γλώσσα γραμματοσειράς JavaScript: object.style.display="inline"

Παράδειγμα TIY

Πώς να εμφανίζεται ένα στοιχείο ως εσωτερικό στοιχείο
Αυτό το παράδειγμα δείχνει πώς να εμφανίζεται ένα στοιχείο ως εσωτερικό στοιχείο.
Πώς να εμφανίζεται ένα στοιχείο ως μπλοκ στοιχείο
Αυτό το παράδειγμα δείχνει πώς να εμφανίζεται ένα στοιχείο ως μπλοκ στοιχείο.

Υποστήριξη προγράμματος περιήγησης

Τα αριθμήματα στη τаблицή δείχνουν την πρώτη έκδοση του προγράμματος περιήγησης που υποστηρίζει πλήρως το χαρακτηριστικό.

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

Σημείωση:Αν οριστεί το !DOCTYPE, ο Internet Explorer 8 (και μεταγενέστερες εκδόσεις) υποστηρίζει τις τιμές των χαρακτηριστικών "inline-table", "run-in", "table", "table-caption", "table-cell", "table-column", "table-column-group", "table-row", "table-row-group" και "inherit".