CSS padding attribute

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

Η συντομευμένη ιδιότητα padding ρυθμίζει όλες τις ιδιότητες περιθωρίου σε μια δήλωση.

Επεξήγηση

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

Σημείωση:Δεν επιτρέπεται η χρήση αρνητικών τιμών.

Παράδειγμα 1

padding:10px 5px 15px 20px;
  • Το επάνω περιθώριο είναι 10px
  • Το δεξί περιθώριο είναι 5px
  • Το κάτω περιθώριο είναι 15px
  • Το αριστερό περιθώριο είναι 20px

Παράδειγμα 2

padding:10px 5px 15px;
  • Το επάνω περιθώριο είναι 10px
  • Το δεξί και το αριστερό περιθώριο είναι 5px
  • Το κάτω περιθώριο είναι 15px

Παράδειγμα 3

padding:10px 5px;
  • Το επάνω και το κάτω περιθώριο είναι 10px
  • Το δεξί και το αριστερό περιθώριο είναι 5px

Παράδειγμα 4

padding:10px;
  • Όλα τα τεσσάρων περιθώρια είναι 10px

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

Εκμάθηση CSS:Το εσωτερικό περιθώριο του CSS

Εγχειρίδιο HTML DOM:Πρότυπο περιθωρίου

Παράδειγμα

Ρυθμίστε τα τεσσάρων περιθώρια του στοιχείου p:

p
  {
  padding:2cm 4cm 3cm 4cm;
  }

Προσωπική δοκιμή

Γλώσσα γραφής CSS

padding: length|initial|inherit;

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

Τιμή Περιγραφή
auto Ο περιηγητής υπολογίζει το περιθώριο.
length Καθορίζει την τιμή του περιθωρίου με συγκεκριμένες μονάδες, όπως pixels, centimeters κ.λπ. Η προεπιλεγμένη τιμή είναι 0px.
% Καθορίζει το περιθώριο ως ποσοστό της πλάτους του γονικού στοιχείου.
inherit Καθορίζει ότι πρέπει να κληρονομηθεί το περιθώριο από το γονικό στοιχείο.

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

Προεπιλεγμένη τιμή: 0
Προγενέστερη κληρονομικότητα: no
Έκδοση: CSS1
Γλώσσα γραφής JavaScript: object.style.padding="10px 5px"

Προσωπική δοκιμή

Όλες οι προσαρμογές περιθωρίου σε μια δήλωση
Αυτό το παράδειγμα δείχνει πώς χρησιμοποιείται η συντομευμένη ιδιότητα για να ρυθμίσουν όλες οι προσαρμογές περιθωρίου σε μια δήλωση, μπορεί να υπάρχουν ένας έως τέσσερις τιμές.

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

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

Chrome IE / Edge Firefox Safari Opera
1.0 4.0 1.0 1.0 3.5