Πλαίσιο κουτιού: Περιθωρίου CSS

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

Η ιδιότητα padding του CSS ορίζει το χώρο μεταξύ του περιθωρίου του στοιχείου και του περιεχομένου του στοιχείου.}

CSS padding attribute

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

Για παράδειγμα, αν θέλεις να έχεις τα περιθώρια των όλων των στοιχείων h1 10 εικονοστοιχεία, πρέπει να το κάνεις έτσι:

h1 {padding: 10px;}

Μπορείς επίσης να ρυθμίσεις τα περιθώρια των τεσσάρων πλευρών σε σειρά επάνω, δεξιά, κάτω και αριστερά, και κάθε πλευρά μπορεί να χρησιμοποιήσει διαφορετικές μονάδες ή ποσοστιαίες τιμές:

h1 {padding: 10px 0.25em 2ex 20%;}

Ιδιότητες του μονομερούς περιθωρίου

Επίσης, μπορείς να ρυθμίσεις τα περιθώρια επάνω, δεξιά, κάτω και αριστερά χρησιμοποιώντας τις τέσσερις ξεχωριστές ιδιότητες αντίστοιχα:

Είσαι ήδη ενδιαφέροντας, η επίδραση των παρακάτω κανόνων είναι πλήρως ίσα με τον παραπάνω συντομευμένο κανόνα:

h1 {
  padding-top: 10px;
  padding-right: 0.25em;
  padding-bottom: 2ex;
  padding-left: 20%;
  }

Τιμές ποσοστού του περιθωρίου

Η αναφορά για το ποσοστό του περιθωρίου

Η παρακάτω κανόνας ρυθμίζει το περιθώριο του παραράγαφου στο 10% του width του γονικού στοιχείου:

p {padding: 10%;}

Για παράδειγμα: Αν το γονικό στοιχείο ενός παραράγαφου είναι το στοιχείο div, τότε τα περιθώρια του θα πρέπει να υπολογιστούν με βάση το width του div.

<div style="width: 200px;">
<p>Αυτό το παραράγαφος περιέχεται σε ένα DIV που έχει πλάτος 200 εικονοστοιχεία.</p>
</div>

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

Παράδειγμα CSS εσωτερικού περιθωρίου:

Όλες οι ιδιότητες του εσωτερικού περιθωρίου σε μια δήλωση
Αυτή η παράδειγμα δείχνει πώς να χρησιμοποιήσετε το συντομευμένο χαρακτηριστικό για να ρυθμίσετε όλες τις ιδιότητες του εσωτερικού περιθωρίου σε μια δήλωση, μπορεί να υπάρχουν ένας έως τέσσερις τιμές.
Ρύθμιση κάτω εσωτερικού περιθωρίου 1
Αυτή η παράδειγμα δείχνει πώς να χρησιμοποιήσετε το μέτρο του κεντρώματος για να ρυθμίσετε την κάτω εσωτερική χάρα του κελιού.
Ρύθμιση κάτω εσωτερικού περιθωρίου 2
Αυτή η παράδειγμα δείχνει πώς να χρησιμοποιήσετε το ποσοστό τομέα για να ρυθμίσετε την κάτω εσωτερική χάρα του κελιού.
Ρύθμιση αριστερού εσωτερικού περιθωρίου 1
Αυτή η παράδειγμα δείχνει πώς να χρησιμοποιήσετε το μέτρο του κεντρώματος για να ρυθμίσετε την αριστερή εσωτερική χάρα του κελιού.
Ρύθμιση αριστερού εσωτερικού περιθωρίου 2
Αυτή η παράδειγμα δείχνει πώς να χρησιμοποιήσετε το ποσοστό τομέα για να ρυθμίσετε την αριστερή εσωτερική χάρα του κελιού.
Set right inner padding 1
This example demonstrates how to set the right inner padding of the cell using centimeter values.
Set right inner padding 2
This example demonstrates how to set the right inner padding of the cell using percentage values.
Set top inner padding 1
This example demonstrates how to set the top inner padding of the cell using centimeter values.
Set top inner padding 2
This example demonstrates how to set the top inner padding of the cell using percentage values.

CSS Inner Padding Attribute

Attribute Description
padding Shorthand attribute. It is used to set the inner padding attributes of the element in a single declaration.
padding-bottom Set the bottom inner padding of the element.
padding-left Set the left inner padding of the element.
padding-right Set the right inner padding of the element.
padding-top Set the top inner padding of the element.