CSS gap attribute

  • προηγούμενη σελίδα font-weight
  • επόμενη σελίδα grid

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

Η ιδιότητα gap ορίζει το μέγεθος του διαστήματος μεταξύ των γραμμών και των στηλών στο flexbox, το δίκτυο ή τα πολλαπλά στήλες. Είναι συντομευμένη ιδιότητα των παρακάτω ιδιοτήτων:

Σημείωση:Η ιδιότητα gap ονομαζόταν προηγουμένως grid-gap.

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

Εκμάθηση CSSΠλαίσιο δίκτυο CSS

Εκμάθηση CSSΠλαίσιο ελαστικό CSS

Εκμάθηση CSSΠλαίσιο πολλαπλών στηλών CSS

Χρήμα CSSιδιότητα row-gap

Χρήμα CSSιδιότητα column-gap

παράδειγμα

Παράδειγμα 1

Ρυθμίστε το διάστημα μεταξύ των γραμμών και των στηλών σε 50px:

.grid-container {
  gap: 50px;
}

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

Παράδειγμα 2: Πλαίσιο δίκτυο

Ρυθμίστε το διάστημα των γραμμών σε 20px και το διάστημα των στηλών σε 50px στο δίκτυο:

#grid-container {
  display: grid;
  gap: 20px 50px;
}

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

Παράδειγμα 3: Πλαίσιο ελαστικό

Ρυθμίστε το διάστημα των γραμμών σε 20px και το διάστημα των στηλών σε 70px στο ελαστικό πλαίσιο:

#flex-container {
  display: flex;
  gap: 20px 70px;
}

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

Παράδειγμα 4: Πλαίσιο πολλαπλών στηλών

Ρυθμίστε το διαστήματα των στηλών στο πολλαπλά στήλες σε 50px:

#newspaper {
  columns: 3;
  gap: 50px;
}

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

Γλώσσα CSS

gap: row-gap column-gap|initial|inherit;
Τιμή Περιγραφή
row-gap Ρυθμίστε το μέγεθος της απόστασης μεταξύ των γραμμών στο δίκτυο ή στο ελαστικό πλαίσιο.
column-gap Ρυθμίστε το μέγεθος της απόστασης μεταξύ των στηλών στο δίκτυο, στο ελαστικό πλαίσιο ή στα πολλαπλά στήλες.
initial Αναθέστε αυτή την ιδιότητα στην προεπιλεγμένη της τιμή. Δείτε: initial.
inherit Κληρονομείται αυτή η ιδιότητα από το γονικό στοιχείο. Δείτε: inherit.

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

Προεπιλεγμένη τιμή: normal normal
Κληρονομικότητα: Όχι
Προσαρμογή κινούμενων εικόνων: Υποστηρίζεται. Δείτε τα ξεχωριστά αξιώματα. Δείτε:Αξιώματα κινούμενων εικόνων.
Έκδοση: Μονάδα Συμφωνίας Κουτί CSS Level 3
Γλώσσα JavaScript: object.style.gap="50px 100px"

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

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

πλαίσιο Chrome IE / Edge Firefox Safari Opera
στο δίκτυο 66 16 61 12 53
στο ελαστικό πλαίσιο 84 84 63 14.1 70
στα πολλαπλά στήλες 66 16 61 μη υποστηριζόμενο 53
  • προηγούμενη σελίδα font-weight
  • επόμενη σελίδα grid