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

Definition and Usage

The element's padding-inline It refers to the space from the border to the content in the inline direction. It is a shorthand attribute of the following properties:

• padding-inline-start
• padding-inline-end

padding-inline The value of the property can be set in different ways:

If the padding-inline property has two values:

padding-inline: 10px 50px;

• The inner padding at the start is 10px
• The inner padding at the end is 50px

Αν η ιδιότητα padding-inline έχει μια τιμή:

padding-inline: 10px;

• Η απόσταση του αρχικού και τελικού άκρου είναι 10px

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

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

Παράδειγμα

Παράδειγμα 1

Ρύθμιση του padding στις δύο πλευρές της γραμμικής ακολουθίας:

div {
  padding-inline: 50px;
}

Προσπαθήστε το προσωπικά

Παράδειγμα 2

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

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

Προσπαθήστε το προσωπικά

Παράδειγμα 3

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

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

Προσπαθήστε το προσωπικά

Γλώσσα CSS

padding-inline: auto|value|initial|εκληροδότηση;

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

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

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

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

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

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

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

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

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

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

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

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

Αναφορά:Ατρβούς writing-mode του CSS