CSS padding-inline-start ιδιότητα

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

στοιχείου padding-inline-start ιδιότητες αναφέρονται στο χώρο από το φράγμα μέχρι το περιεχόμενο στην κατεύθυνση της γραμμής.

CSS padding-inline και padding-block ιδιότητες είναι συναφείς με τις ιδιότητες CSS padding-top、padding-bottom、padding-left και padding-right μοιάζουν πολύ, αλλά padding-inline και padding-block Η ιδιότητα εξαρτάται από την κατεύθυνση της γραμμής και την κατεύθυνση του τομέα.

Σημείωση:σχετικές ιδιότητες CSS writing-mode και direction Ορίζει την κατεύθυνση της γραμμής. Αυτό επηρεάζει τη θέση του στοιχείου στην κατεύθυνση της γραμμής και padding-inline-start Το αποτέλεσμα της ιδιότητας. Για τις σελίδες με αγγλικό κείμενο, η κατεύθυνση του τομέα είναι προς τα κάτω, η κατεύθυνση της γραμμής είναι από αριστερά προς δεξιά.

Επίδειξη

Παράδειγμα 1

Ρυθμίστε το εσωτερικό περιθώριο στην αρχή της κατεύθυνσης της γραμμής.

div {
  padding-inline-start: 50px;
}

Προσπαθήστε μόνοι σας

Παράδειγμα 2

Ρυθμίστε την ιδιότητα writing-mode Όταν η τιμή της ιδιότητας είναι vertical-rl, η κατεύθυνση της γραμμής είναι προς τα κάτω. Το αποτέλεσμα είναι η θέση του στοιχείου να μετακινείται από την αριστερή πλευρά στην κορυφή:

div {
  writing-mode: vertical-rl;
  padding-inline-start: 100px;
}

Προσπαθήστε μόνοι σας

Παράδειγμα 3

Ρυθμίστε την ιδιότητα direction Όταν η τιμή της ιδιότητας είναι rtl, η κατεύθυνση της γραμμής είναι από δεξιά προς αριστερά. Το αποτέλεσμα είναι η θέση του στοιχείου να μετακινείται από την αριστερή πλευρά στην δεξιά:

div {
  direction: rtl;
  padding-inline-start: 100px;
}

Προσπαθήστε μόνοι σας

Γλωσσάριο CSS

padding-inline-start: αυτόματα|τιμή|initial|κληρονομικότητα;

Τιμή ιδιότητας

Τιμή Περιγραφή
αυτόματα Προεπιλεγμένο. Η προεπιλεγμένη απόσταση padding-inline-start του στοιχείου.
length

Ορίζει την απόσταση με μονάδες px, pt, cm κ.λπ. Δεν επιτρέπεται η χρήση αρνητικών τιμών.

Εξετάστε:Μονάδες CSS。
% Ορίζει το ποσοστό απόσταση στην κατεύθυνση της γραμμής του γονικού στοιχείου.
initial Ρυθμίστε αυτήν την ιδιότητα στη προεπιλεγμένη της τιμή. Δείτε initial。
κληρονομικότητα Κληρονομεί αυτήν την ιδιότητα από το γονικό στοιχείο. Δείτε κληρονομικότητα。

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

Προεπιλεγμένος τιμή: αυτόματα
Προγενέστερη κληρονομικότητα: Όχι
Κίνηση: Υποστηρίζεται. Εξετάστε:Αντικειμενικές ιδιότητες κίνησης。
Έκδοση: CSS3
Γλώσσα Γκουίντα: object.style.paddingInlineStart="100px"

Υποστήριξη περιηγητή

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

Χρωμίου Εντζ Φάιρφοξ Σάφάρι Οπερά
87.0 87.0 41.0 12.1 73.0

Σχετικές σελίδες

Αναφορά:CSS direction ιδιότητα

Αναφορά:CSS padding-inline ιδιότητα

Αναφορά:CSS padding-inline-end ιδιότητα

Αναφορά:CSS padding-bottom ιδιότητα

Αναφορά:CSS padding-left ιδιότητα

Αναφορά:CSS padding-right ιδιότητα

Αναφορά:CSS padding-top ιδιότητα

Αναφορά:Πρότυπο writing-mode